/* Desktop screens at native mockup coordinates (see js/screens/*.js). */
.flowless { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.flowless > * { position: absolute; }

/* ---------------------------------------------------------------- shared pieces */
.portrait { position: relative; overflow: hidden; width: 100%; height: 100%; background: #f1ece2; }
.portrait-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.05) brightness(1.05); opacity: 0.55; }
.portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.2s; }
.portrait.ready .portrait-img { opacity: 1; }
.portrait-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; font: 600 18px var(--f-ui); color: var(--ink-2); text-align: center; padding: 16px; }
.portrait.ready .portrait-loading { display: none; }
.portrait.failed .portrait-loading { color: var(--danger); }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.35; animation: dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.zoom-btn {
  position: absolute; right: 10px; bottom: 10px; width: 46px; height: 46px; border-radius: 10px;
  border: 0; background: rgba(32, 35, 43, 0.82); color: #fff; font-size: 24px; display: grid; place-items: center; z-index: 2;
}
.zoom-btn:hover { background: var(--graphite); }
.zoom-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(24, 26, 32, 0.86); display: flex; flex-direction: column; align-items: center; padding: 14px; gap: 10px; }
.zoom-top { width: 100%; display: flex; justify-content: space-between; align-items: center; max-width: 900px; }
.zoom-timer { font: 700 40px var(--f-ui); font-stretch: 75%; color: var(--coral); min-width: 120px; }
.zoom-close { background: var(--paper-2); font-size: 18px; padding: 10px 16px; }
.zoom-fig { margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zoom-fig img { max-width: min(92vw, 900px); max-height: calc(100% - 60px); object-fit: contain; border-radius: 12px; background: #fff; }
.zoom-fig figcaption { font: 700 34px var(--f-ui); color: #fff; letter-spacing: 0.06em; text-transform: uppercase; }

.framed { position: absolute; inset: 0; background: #fff; }
.framed img { width: 100%; height: 100%; object-fit: contain; display: block; }

.avatar { position: relative; overflow: hidden; background: #f3efe7; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.monogram { display: grid; place-items: center; }
.avatar.monogram span { font: 800 90px var(--f-cond); color: rgba(32, 35, 43, 0.78); }
.avatar.round { border-radius: 50%; border: 3px solid #4a5a8a; width: 100%; height: 100%; }
.avatar.round.monogram span { font-size: 64px; }

.room-ctl { position: absolute; display: flex; gap: 6px; z-index: 5; }
.ctl-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(32, 35, 43, 0.3); background: rgba(255, 252, 245, 0.75); color: rgba(32, 35, 43, 0.7); display: grid; place-items: center; font-size: 20px; opacity: 0.6; transition: opacity 0.15s; }
.ctl-btn:hover, .ctl-btn:focus-visible { opacity: 1; }
.room-ctl.dark .ctl-btn { background: rgba(29, 32, 36, 0.8); color: #fff; }

.next-pill { cursor: default; }
.next-pill:hover { filter: none !important; }
.next-pill:active { transform: none !important; }
.next-pill.holding { background: var(--graphite); font-size: 24px !important; }

.draw-cover {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 30px;
  background: repeating-linear-gradient(135deg, #fbf7ee 0 18px, #f6f0e3 18px 36px); color: var(--graphite);
}
.cover-pencil { font-size: 70px; color: #9a9ca3; }
.cover-title { font: 700 44px var(--f-ui); font-stretch: 80%; letter-spacing: 0.02em; }
.cover-sub { font: 400 24px var(--f-body); color: var(--ink-2); }
.draw-cover .dots { color: var(--cobalt); }
.draw-cover.small .cover-pencil { font-size: 50px; }
.draw-cover.small .cover-title { font-size: 30px; }

/* ---------------------------------------------------------------- S01 */
.s01-nav { background: none; border: 0; padding: 0; font: 700 25px var(--f-cond); letter-spacing: 0.01em; color: var(--graphite); text-align: center; display: grid; place-items: center; font-family: 'Bahnschrift', sans-serif; font-stretch: 75%; }
.s01-nav:hover { color: var(--coral-hot); }
.s01-big { border-radius: 10px; font-size: 37px; font-weight: 600; font-stretch: 80%; letter-spacing: 0.02em; justify-content: flex-start; padding: 0; }
.s01-big .lead { width: 150px; display: grid; place-items: center; font-size: 46px; }
.s01-big .txt { flex: 1; text-align: left; padding-left: 4px; }
.s01-big .tail { width: 100px; display: grid; place-items: center; font-size: 40px; }
.s01-big.btn-cobalt .txt { padding-left: 22px; }
.s01-small { border-width: 1.5px; border-radius: 8px; font-size: 19px; gap: 8px; font-weight: 700; font-stretch: 80%; background: rgba(255, 252, 245, 0.35); }
.s01-small .ico { font-size: 30px; }

/* ---------------------------------------------------------------- S02 */
.s02-group { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.s02-group > .mode-card { position: absolute; }
.mode-card { position: relative; }
.mode-card { border: 3px solid #adb2b5; border-radius: 14px; background: transparent; padding: 0; transition: border-color 0.15s, background 0.15s; }
.mode-card .mode-art { position: absolute; }
.stage .mode-card[data-mode='chain'] .mode-art { left: 8px; top: 33px; width: 450px; height: 432px; }
.stage .mode-card[data-mode='relay'] .mode-art { left: 7px; top: 33px; width: 428px; height: 432px; }
.stage .mode-card[data-mode='mirror'] .mode-art { left: 5px; top: 33px; width: 458px; height: 432px; }
.mode-card.on { border-color: #fd5450; border-width: 5px; background: linear-gradient(160deg, #fedcd2 0%, #fee7dc 55%, #fdf0e6 100%); }
.stage .mode-card.on .mode-art { margin: -2px 0 0 -2px; }
.mode-card:not(.on):hover { border-color: #7f8589; }
.s02-back { border-width: 3px; border-radius: 16px; font-size: 40px; font-weight: 700; font-stretch: 78%; gap: 60px; background: transparent; }
.s02-back .ico, .s02-cont .ico { font-size: 46px; }
.s02-cont { border-radius: 16px; font-size: 44px; font-weight: 700; font-stretch: 75%; gap: 30px; background: #fe655f; }

/* ---------------------------------------------------------------- S03 */
.stage .s03-label { color: transparent; font: 700 20px var(--f-ui); }
.stage-S03 .field { border-radius: 12px; border-width: 2px; padding: 0 20px; gap: 22px; }
.stage-S03 .field .field-ico { font-size: 38px; color: #8a8d96; }
.stage-S03 .field input { font-size: 24px; }
.code-field { position: relative; }
.code-field .code-input { font: 700 34px var(--f-ui); letter-spacing: 0.72em; text-transform: uppercase; padding-left: 26px; position: relative; z-index: 1; }
.code-slots { position: absolute; left: 105px; right: 60px; bottom: 26px; display: flex; justify-content: space-between; pointer-events: none; }
.code-slots i { width: 32px; height: 2px; background: #9a9ca3; }
.code-slots i.filled { background: transparent; }
.s03-btn { border-radius: 10px; font-size: 42px; font-weight: 700; font-stretch: 75%; letter-spacing: 0.02em; position: absolute; }
.s03-btn .txt { flex: 1; text-align: center; padding-left: 50px; }
.s03-btn .ico { font-size: 40px; margin-right: 28px; }
.btn-coral.s03-btn { background: #fd584d; background-image: linear-gradient(95deg, rgba(255,255,255,0.05), rgba(0,0,0,0.03)); }
.s03-back { background: #fffcf5; border: 2px solid var(--graphite); border-radius: 14px; font-size: 32px; font-weight: 700; font-stretch: 78%; gap: 34px; color: var(--graphite); }
.s03-back .ico { font-size: 36px; }
.field-error { font-size: 17px; line-height: 1.2; align-items: center; }
.field-error .ico { font-size: 18px; color: var(--danger); }
.s03-offline { display: flex; gap: 8px; align-items: center; justify-content: center; font: 600 18px var(--f-ui); color: var(--danger); background: rgba(255, 252, 245, 0.9); border-radius: 8px; }

/* ---------------------------------------------------------------- S04 */
.s04-code { font: 800 62px var(--f-heavy); letter-spacing: 0.01em; line-height: 1; display: flex; align-items: center; color: #17191d; font-family: 'Segoe UI Black', 'Arial Black', sans-serif; }
.s04-copy { border: 1.5px solid #a8a9ad; border-radius: 10px; background: #fbf8f1; font-size: 34px; display: grid; place-items: center; color: var(--graphite); }
.s04-invite { border-radius: 12px; font-size: 30px; font-weight: 600; font-stretch: 85%; gap: 26px; background: #3271fa; }
.s04-invite .ico { font-size: 38px; }
.s04-roster { display: grid; gap: 16px; }
.s04-roster.size-l { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 388px; column-gap: 16px; }
.s04-roster.size-m { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 186px; }
.s04-roster.size-s { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; gap: 10px; }
.s04-card { position: relative; border: 1.5px solid #2c2f37; border-radius: 6px; background: #fdfaf3; overflow: hidden; }
.size-l .s04-av { position: absolute; left: 14px; top: 8px; right: 16px; height: 266px; }
.size-l .s04-name { position: absolute; left: 0; right: 0; top: 280px; height: 44px; display: flex; justify-content: center; align-items: center; gap: 20px; }
.size-l .s04-ready { position: absolute; left: 21px; right: 18px; top: 325px; height: 48px; }
.s04-name .nm { font: 700 30px var(--f-ui); font-stretch: 85%; color: #1b1d22; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s04-name .host { font: 600 25px var(--f-ui); font-stretch: 85%; color: #f36a60; }
.s04-name .you { font: 600 22px var(--f-ui); color: var(--cobalt); }
.s04-ready { display: flex; align-items: center; justify-content: center; gap: 14px; border: 0; border-radius: 6px; font: 600 25px var(--f-ui); font-stretch: 85%; }
.s04-ready .ico { font-size: 32px; }
.s04-ready.on { background: #91f09f; color: #103a22; }
.s04-ready.on .ico { color: #077f4a; }
.s04-ready.off { background: #ebe7df; color: #4c4f57; }
button.s04-ready.off { background: #fff0c9; color: #6b4b00; outline: 2px dashed #e0a21a; outline-offset: -4px; }
.s04-ready.away { background: #fde2dc; color: var(--danger); }
.size-m .s04-av { position: absolute; left: 10px; top: 10px; width: 164px; bottom: 10px; }
.size-m .s04-name { position: absolute; left: 186px; right: 8px; top: 34px; display: flex; flex-direction: column; gap: 4px; }
.size-m .s04-name .nm { font-size: 26px; max-width: 100%; }
.size-m .s04-ready { position: absolute; left: 186px; right: 12px; bottom: 16px; height: 46px; font-size: 20px; }
.size-s .s04-av { position: absolute; left: 6px; top: 6px; width: 94px; bottom: 6px; }
.size-s .avatar.monogram span { font-size: 54px; }
.size-s .s04-name { position: absolute; left: 108px; right: 6px; top: 10px; display: flex; flex-direction: column; }
.size-s .s04-name .nm { font-size: 20px; max-width: 100%; }
.size-s .s04-name .host, .size-s .s04-name .you { font-size: 16px; }
.size-s .s04-ready { position: absolute; left: 108px; right: 8px; bottom: 10px; height: 40px; font-size: 16px; gap: 6px; }
.size-s .s04-ready .ico { font-size: 22px; }
.s04-panel { border: 1.5px solid #2c2f37; border-radius: 8px; background: #fdfaf3; }
.s04-panel-title { position: absolute; left: 20px; top: 12px; margin: 0; display: flex; align-items: center; gap: 16px; font: 700 26px var(--f-ui); font-stretch: 85%; color: #17191d; }
.s04-panel-title .ico { font-size: 36px; }
.s04-rows { position: absolute; left: 16px; right: 16px; top: 62px; bottom: 12px; border: 1.5px solid #d9d6cf; border-radius: 6px; display: grid; grid-template-rows: repeat(4, 1fr); padding: 3px 0; }
.s04-setrow { display: grid; grid-template-columns: 138px 1fr; align-items: center; padding: 0 0 0 16px; position: relative; }
.s04-setrow + .s04-setrow::before { content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid #ebe7df; }
.s04-setlabel { font: 400 18px var(--f-ui); color: #7a7c83; letter-spacing: 0.02em; }
.s04-setwrap { position: relative; padding-right: 6px; }
.set-btn { width: 100%; height: 44px; display: flex; align-items: center; gap: 14px; border: 1.5px solid #d9d6cf; border-radius: 8px; background: #fffdf8; padding: 0 12px; font: 700 21px var(--f-ui); font-stretch: 85%; color: #17191d; text-align: left; }
.set-btn .set-ico { font-size: 26px; }
.set-btn .set-val { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.set-btn .set-chev { font-size: 22px; }
.set-btn.ro { cursor: default; }
.set-btn.ro .set-chev { visibility: hidden; }
.set-pop { position: absolute; right: 6px; top: 50px; width: 360px; max-height: 470px; overflow: auto; z-index: 30; background: #fffcf5; border: 2px solid var(--graphite); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); padding: 8px; display: grid; gap: 4px; }
.set-opt { display: grid; grid-template-columns: 1fr; gap: 2px; text-align: left; border: 0; background: none; border-radius: 8px; padding: 10px 12px; font: 700 20px var(--f-ui); font-stretch: 85%; min-height: 44px; }
.set-opt.check { grid-template-columns: 26px 1fr; align-items: center; column-gap: 10px; cursor: pointer; }
.set-opt.check input { width: 22px; height: 22px; accent-color: var(--cobalt); grid-row: span 2; }
.set-opt:hover, .set-opt:focus-visible { background: #eef2ff; }
.set-opt[aria-selected='true'] { background: var(--cobalt-soft); color: #1b3fb8; }
.set-opt:disabled { opacity: 0.45; }
.set-opt-sub { font: 400 15px var(--f-body); color: var(--ink-2); }
.set-opt.all { border-bottom: 1px solid #e6e1d7; border-radius: 0; }
.set-info { margin: 4px 8px 6px; font: 400 15px/1.35 var(--f-body); color: var(--ink-2); }
.set-done { margin-top: 6px; font-size: 20px; }
.s04-status { display: flex; align-items: center; gap: 22px; padding: 0 22px 0 60px; border: 2px solid #20232b; border-radius: 8px; background: #fdfaf3; font: 700 30px var(--f-ui); font-stretch: 80%; color: #17191d; }
.s04-status-ico { font-size: 52px; color: #9a9ca3; display: grid; place-items: center; }
.s04-status.ok .s04-status-ico { color: #0f9f55; }
.s04-status.long { font-size: 22px; padding-left: 30px; gap: 14px; }
.s04-status.xlong { font-size: 18px; }
.s04-start { border-radius: 14px; font-size: 44px; font-weight: 600; font-stretch: 85%; gap: 36px; background: #fd6b5c; }
.s04-start .ico { font-size: 48px; }
.s04-ctl { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.ctl-pill { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 22px; border: 1.5px solid rgba(32, 35, 43, 0.35); background: rgba(255, 252, 245, 0.8); font: 600 16px var(--f-ui); color: var(--graphite); }
.ctl-pill .ico { font-size: 20px; }

/* ---------------------------------------------------------------- S05 */
.s05-title { display: flex; align-items: center; gap: 12px; }
.s05-cat { width: 74px; height: 62px; margin: 4px 0 0 4px; }
.s05-mode { font: 900 italic 48px 'Segoe UI Black', 'Arial Black', sans-serif; letter-spacing: -0.01em; color: #17191d; position: relative; top: -6px; }
.s05-mode::after { content: ''; position: absolute; left: 0; width: 205px; bottom: -8px; height: 7px; border-radius: 4px; background: #fd6a5c; transform: rotate(-1deg); }
.s05-round { font: 700 21px var(--f-ui); letter-spacing: 0.04em; color: #17191d; text-align: center; }
.s05-dots { display: flex; align-items: center; justify-content: center; gap: 30px; }
.s05-dots .rule { width: 80px; height: 2px; background: #cfcfcf; }
.s05-dots i { width: 20px; height: 20px; border-radius: 50%; background: #c7c7c7; }
.s05-dots i.on { background: #2f5cf6; }
.s05-dots i.done { background: #8fa8f6; }
.s05-portrait { overflow: hidden; }
.s05-name { font: 800 58px var(--f-ui); font-stretch: 85%; color: #17191d; text-align: center; letter-spacing: 0.02em; text-transform: uppercase; line-height: 64px; white-space: nowrap; }
.s05-name.long { font-size: 40px; }
.s05-name.xlong { font-size: 28px; white-space: normal; line-height: 30px; }
.s05-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s05-ring .arc { transition: stroke-dashoffset 0.12s linear; }
.s05-num { position: absolute; inset: 0; display: grid; place-items: center; font: 800 160px 'Segoe UI Black', 'Arial Black', sans-serif; color: #fd6a5c; }
.s05-ring.loading .s05-num { visibility: hidden; }
.s05-load { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 50px; font: 600 22px var(--f-ui); color: var(--ink-2); }
.s05-ring.paused .s05-num { color: #b7b7b7; }

/* ---------------------------------------------------------------- S06 */
.s06-round { font: 600 30px var(--f-ui); letter-spacing: 0.08em; color: #2b2d33; text-align: center; line-height: 36px; }
.s06-timer, .s07-timer .t, .s09-timer span, .s14-time, .s15-timer .t { font-variant-numeric: tabular-nums; }
.s06-timer { font: 700 84px var(--f-ui); font-stretch: 75%; color: #fd6a5c; text-align: center; line-height: 74px; letter-spacing: 0.02em; }
.s06-timer.warn, .s09-timer.warn span, .s07-timer .t.warn { animation: pulse 1s infinite; }
.s06-timer.paused { color: #9a9ca3; }
@keyframes pulse { 50% { opacity: 0.55; } }
.s06-ref { overflow: hidden; }
.s06-name { font: 700 40px var(--f-ui); text-transform: uppercase; letter-spacing: 0.12em; color: #2b2d33; text-align: center; line-height: 50px; white-space: nowrap; }
.s06-name.long { font-size: 28px; letter-spacing: 0.06em; }
.s06-name.xlong { font-size: 20px; letter-spacing: 0.02em; white-space: normal; line-height: 22px; }
.s06-submit { border-radius: 16px; font-size: 32px; font-weight: 600; letter-spacing: 0.1em; gap: 14px; background: #fd6a5c; box-shadow: 0 5px 0 #d9d2c8; }
.s06-submit .ico { font-size: 30px; }

/* ---------------------------------------------------------------- S07 */
.s07-timer { display: flex; align-items: center; justify-content: center; gap: 14px; background: #fd6a5c; border: 3px solid #211926; border-radius: 12px; color: #211926; }
.s07-timer .ico { font-size: 44px; }
.s07-timer .t { font: 700 52px var(--f-ui); font-stretch: 85%; }
.s07-timer.drawing { background: #f1ede5; }
.s07-canvas { background: #fff; overflow: hidden; }
.frozen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.s07-av { border-radius: 50%; overflow: hidden; }
.s07-artist { font: 400 62px 'Impact', 'Bahnschrift', sans-serif; letter-spacing: 0.01em; color: #111; display: flex; align-items: center; line-height: 1.05; overflow: hidden; overflow-wrap: anywhere; }
.s07-artist[data-len='m'] { font-size: 46px; }
.s07-artist[data-len='l'] { font-size: 36px; }
.s07-artist[data-len='xl'] { font-size: 30px; }
.s07-input { border: 3px solid #5c94fb; border-radius: 10px; background: #fffefb; padding: 0 24px; font: 400 32px var(--f-body); color: var(--graphite); outline: none; box-shadow: 0 0 0 4px rgba(92, 148, 251, 0.15); }
.s07-input:disabled { border-color: #c9c9cc; box-shadow: none; background: #f6f3ec; }
.s07-submit { border-radius: 12px; font: 700 34px var(--f-body); letter-spacing: 0.02em; background: #fd6a5c; text-transform: uppercase; font-family: 'Segoe UI', sans-serif; }
.s07-hint { display: flex; align-items: center; gap: 22px; background: #edf1fa; border-radius: 10px; padding-left: 26px; }
.s07-hint .ico { font-size: 44px; color: #2f5cf6; }
.s07-hint .bar { width: 2px; height: 50px; background: #b9c0d0; }
.s07-hint .txt { font: 400 22px var(--f-body); color: #1b1d22; }
.s07-note { font: 600 17px var(--f-ui); color: var(--ink-2); display: flex; align-items: center; }
.s07-list { list-style: none; margin: 0; padding: 4px 0; display: grid; gap: 4px; align-content: start; }
.s07-list li, .s15-list li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font: 400 18px var(--f-body); background: rgba(255, 255, 255, 0.6); border-radius: 8px; padding: 3px 10px; }
.s07-list li .gt, .s15-list li .gt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s07-list li .mk, .s15-list li .mk { font-weight: 800; color: var(--danger); }
.s07-list li.correct .mk, .s15-list li.correct .mk { color: var(--green-ink); }
.s07-list li .gr, .s15-list li .gr { font: 600 15px var(--f-ui); color: var(--ink-2); }

/* ---------------------------------------------------------------- S08 */
.s08-round { font: 700 25px var(--f-ui); letter-spacing: 0.05em; color: #4a4c52; text-align: center; line-height: 36px; }
.s08-refcard { border: 3px solid #20232b; border-radius: 14px; overflow: hidden; background: #fff; }
.s08-refimg { position: absolute; left: 0; right: 0; top: 0; bottom: 86px; }
.s08-refname { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; background: #262930; color: #fff; display: grid; place-items: center; font: 700 46px var(--f-ui); letter-spacing: 0.04em; text-align: center; padding: 0 10px; }
.s08-refname.long { font-size: 32px; }
.s08-refname.xlong { font-size: 22px; }
.s08-draw { border: 3px solid #20232b; border-radius: 14px; overflow: hidden; background: #fff; }
.s08-draw .framed { inset: 4px; }
.no-drawing { position: absolute; inset: 0; display: grid; place-items: center; font: 600 24px var(--f-ui); color: var(--ink-2); }
.s08-head .swash { position: absolute; left: 0; top: 0; width: 100%; height: 178px; }
.s08-head .txt { position: absolute; left: 36px; right: 20px; top: 34px; height: 110px; display: grid; place-items: center; text-align: center; font: 700 60px var(--f-brush); text-transform: uppercase; color: #17191d; transform: rotate(-3deg); line-height: 1; letter-spacing: -0.01em; }
.s08-head.long .txt { font-size: 48px; }
.s08-head.xlong .txt { font-size: 36px; }
.s08-next { text-align: center; }
.s08-next .txt { display: block; text-transform: uppercase; font: 700 italic 44px var(--f-brush); color: #2a5afd; line-height: 60px; margin-top: 4px; }
.s08-next.long .txt { font-size: 36px; }
.s08-next.xlong .txt { font-size: 26px; }
.s08-next .ul { width: 155px; height: 32px; margin-top: -8px; margin-left: 140px; }
.s08-chips { display: flex; gap: 24px; }
.s08-chip { flex: 1; border: 1.5px solid #20232b; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 22px; position: relative; min-width: 0; }
.s08-chip.coral { background: #fd6559; color: #fff; }
.s08-chip.blue { background: #dee6fe; color: #17191d; }
.s08-chip.none { background: #ebe7df; color: var(--ink-2); }
.s08-chip .n { font: 700 32px var(--f-ui); font-stretch: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.s08-chip.none .n { max-width: none; font-size: 26px; }
.s08-chip .p { font: 800 70px var(--f-ui); font-stretch: 85%; line-height: 1; }
.s08-chip.blue .p { color: #2a5afd; }
.s08-chip .bonus { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 700 13px var(--f-ui); letter-spacing: 0.1em; }
.s08-nextbtn { border: 2px solid #1c2a5c; border-radius: 16px; font-size: 44px; font-weight: 700; font-stretch: 85%; letter-spacing: 0.04em; gap: 26px; background: #2557fa; box-shadow: 0 6px 12px rgba(37, 87, 250, 0.2); }
.s08-nextbtn .ico { font-size: 44px; }
.s08-score { font: 600 17px var(--f-ui); color: var(--ink-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: grid; place-items: center; }

/* ---------------------------------------------------------------- S09 */
.s09-timer { display: flex; align-items: center; justify-content: center; gap: 12px; background: #1a1e22; border-radius: 12px; color: #fd5a4e; }
.s09-timer .ico { font-size: 52px; }
.s09-timer span { font: 700 60px var(--f-ui); font-stretch: 80%; }
.s09-canvas { background: #fdf8ee; }
.s09-ref { overflow: hidden; border-radius: 4px; }
.s09-name { font: 600 26px var(--f-ui); letter-spacing: 0.12em; color: #e8e8ea; text-align: center; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s09-name.long { font-size: 18px; }
.s09-status { display: flex; align-items: center; gap: 14px; border: 1.5px solid #3b3f47; border-radius: 10px; background: #25292f; padding-left: 26px; font: 500 22px var(--f-ui); color: #eceef2; letter-spacing: 0.02em; }
.s09-status b { color: #3f7bff; font-weight: 600; }
.s09-status.done b { color: #7ee29a; }
.dots3 { display: inline-flex; gap: 5px; margin-right: 12px; }
.dots3 i { width: 11px; height: 11px; border-radius: 50%; background: #3f6fff; animation: dot 1.2s infinite; }
.dots3 i:nth-child(2) { animation-delay: 0.2s; }
.dots3 i:nth-child(3) { animation-delay: 0.4s; }
.s09-status.done .dots3 i { animation: none; background: #7ee29a; }
.s09-submit { border-radius: 14px; font-size: 32px; font-weight: 600; letter-spacing: 0.06em; gap: 36px; background: #fd6a5c; }
.s09-submit .ico { font-size: 30px; }

/* ---------------------------------------------------------------- S10 */
.s10-ref { border: 1.5px solid #333; overflow: hidden; background: #fff; }
.s10-ref-wait { position: absolute; inset: 0; display: grid; place-items: center; font: 800 90px var(--f-cond); color: #c9c3b8; background: repeating-linear-gradient(135deg, #fbf7ee 0 10px, #f3ecdf 10px 20px); }
.s10-refname { font: 600 25px var(--f-ui); letter-spacing: 0.08em; color: #30333a; text-align: center; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s10-timer { font: 700 56px 'Segoe UI', sans-serif; color: #fd6a5c; text-align: center; letter-spacing: 0.02em; line-height: 60px; }
.s10-card { overflow: hidden; }
.s10-card .s10-img { position: absolute; inset: 0; }
.s10-card .framed { background: #fcfaf7; }
.s10-card.picked { outline: 5px solid #fd6a5c; outline-offset: 6px; border-radius: 4px; }
.s10-vote { border-radius: 12px; font-size: 42px; font-weight: 700; font-family: 'Segoe UI', sans-serif; letter-spacing: 0.02em; background: #fd665d; }
.s10-vote.armed { background: #20232b; }
.s10-vote.voted { background: #0f9f55; opacity: 1; filter: none; }
.s10-status { font: 500 21px var(--f-body); color: var(--ink-2); text-align: center; display: grid; place-items: center; }
.stage .s10-status.below { top: 921px !important; height: 20px !important; font-size: 15px; line-height: 1; }

/* ---------------------------------------------------------------- S11 */
.s11-ref { border: 1.5px solid #222; overflow: hidden; background: #fff; }
.s11-refname { font: 800 38px 'Segoe UI Black', 'Arial Black', sans-serif; color: #111; line-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s11-card { border: 2px solid #2b2d33; border-radius: 6px; background: #fbf9f4; overflow: hidden; }
.s11-card.win { border: 4px solid #fd5a4e; }
.s11-card .s11-img { position: absolute; left: 6px; right: 6px; top: 8px; bottom: 60px; }
.s11-card.win .s11-img { top: 58px; }
.s11-card .framed { background: #fbf9f4; }
.s11-name { position: absolute; left: 0; right: 0; bottom: 8px; height: 50px; display: grid; place-items: center; font: 800 36px 'Segoe UI', sans-serif; letter-spacing: 0.02em; color: #111; }
.winner-badge { position: absolute; left: -2px; top: -2px; width: 288px; height: 54px; z-index: 2; }
.s11-head { background: #fe5f50; border-radius: 12px; color: #fff; display: grid; place-items: center; font: 700 48px var(--f-ui); font-stretch: 80%; letter-spacing: 0.02em; text-align: center; padding: 0 10px; }
.s11-head.long { font-size: 38px; }
.s11-head.xlong { font-size: 30px; }
.s11-tally { border-radius: 8px; display: grid; justify-items: center; align-content: center; gap: 2px; }
.s11-tally.blue { background: #e5effd; }
.s11-tally.pink { background: #fee5dd; }
.s11-tally .nm { font: 700 32px var(--f-ui); font-stretch: 85%; color: #17191d; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s11-tally .num { font: 900 120px 'Segoe UI Black', 'Arial Black', sans-serif; line-height: 1.05; }
.s11-tally.blue .num { color: #2a5afd; }
.s11-tally.pink .num { color: #fd5a4e; }
.s11-tally .cap { font: 500 22px var(--f-ui); letter-spacing: 0.25em; color: #2b2d33; }
.s11-delta { background: #e9eaed; border-radius: 8px; display: grid; justify-items: center; align-content: center; gap: 6px; }
.s11-delta { overflow: hidden; }
.s11-tag { display: grid; align-content: center; gap: 6px; font: 500 20px var(--f-ui); letter-spacing: 0.22em; color: #4a4c53; }
.s11-tag b { font-weight: 700; color: #17191d; }
.s11-delta .row { display: flex; gap: 30px; max-width: 100%; min-width: 0; padding: 0 14px; box-sizing: border-box; }
.s11-delta .d { display: flex; gap: 28px; align-items: baseline; min-width: 0; }
.s11-delta .d b { font: 900 60px 'Segoe UI Black', 'Arial Black', sans-serif; color: #17191d; min-width: 0; overflow: hidden; white-space: nowrap; }
.s11-delta .d em { font: 900 italic 0 sans-serif; font-style: normal; font: 800 64px var(--f-ui); color: #2a5afd; }
.s11-delta.two .d b, .s11-delta.two .d em { font-size: 40px; }
.s11-delta .d.none { font: 700 40px var(--f-ui); color: var(--ink-2); }
.s11-delta .cap { font: 500 16px var(--f-ui); letter-spacing: 0.3em; color: #2b2d33; }
.s11-next { border-radius: 10px; font-size: 38px; font-weight: 600; font-stretch: 85%; letter-spacing: 0.03em; gap: 20px; background: #2665fb; }

/* ---------------------------------------------------------------- S11-2P */
.s112-hero { border-radius: 18px; overflow: hidden; box-shadow: 0 6px 18px rgba(32, 35, 43, 0.18); border: 3px solid #fff; }
.s112-heroname .swash, .s112-name .swash { position: absolute; inset: 0; width: 100%; height: 100%; }
.s112-heroname .txt, .s112-name .txt { position: absolute; inset: 0; display: grid; place-items: center; font: 700 34px var(--f-brush); color: #fff; letter-spacing: 0.04em; }
.s112-heroname.long .txt { font-size: 22px; }
.s112-frame { border: 1.5px solid #8f8f8f; border-radius: 3px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); }
.s112-frame .framed { inset: 6px; }
.s112-back { border: 3px solid #1e3eb0; border-radius: 18px; font-size: 32px; font-weight: 700; font-stretch: 90%; letter-spacing: 0.06em; gap: 16px; background: #2f63fb; font-family: var(--f-brush); }

/* ---------------------------------------------------------------- S12 */
.s12-mode .swash { position: absolute; inset: 0; width: 100%; height: 100%; }
.s12-mode .txt { position: absolute; inset: 0; display: grid; place-items: center; font: 700 50px var(--f-brush); color: #fff; letter-spacing: 0.02em; transform: rotate(-2deg); }
.s12-sub { font: 400 26px var(--f-hand); color: #1b1d22; text-align: center; letter-spacing: 0.06em; display: grid; place-items: center; font-weight: 700; }
.s12-rows { list-style: none; margin: 0; padding: 46px 0 0; display: grid; gap: 20px; align-content: start; }
.s12-row { position: relative; height: 98px; border: 2px solid #aaa; border-radius: 16px; background: rgba(255, 252, 245, 0.6); display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; }
.s12-row.top { border: 3px solid #fd5a4e; background: #fee9e3; height: 120px; }
.s12-row.left { opacity: 0.6; }
.s12-crown { position: absolute; left: 108px; top: -48px; width: 85px; height: 67px; }
.s12-rank { position: relative; height: 80px; display: grid; place-items: center; }
.s12-rank .blot { position: absolute; left: 26px; width: 84px; height: 80px; }
.s12-rank b { position: relative; font: 700 50px var(--f-brush); color: #fff; margin-left: -10px; }
.s12-name { font: 700 50px var(--f-brush); color: #111; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 16px; }
.s12-score { font: 700 66px var(--f-brush); color: #2a5afd; text-align: center; }
.s12-row.top .s12-score { color: #fd5a4e; font-size: 76px; }
.s12-rows.size-m { gap: 10px; padding-top: 42px; }
.s12-rows.size-m .s12-row { height: 58px; grid-template-columns: 110px 1fr 110px; }
.s12-rows.size-m .s12-row.top { height: 70px; }
.s12-rows.size-m .s12-rank { height: 54px; }
.s12-rows.size-m .s12-rank .blot { width: 56px; height: 54px; left: 22px; }
.s12-rows.size-m .s12-rank b, .s12-rows.size-m .s12-name { font-size: 32px; }
.s12-rows.size-m .s12-score { font-size: 40px; }
.s12-rows.size-m .s12-crown { left: 60px; top: -34px; width: 58px; height: 46px; }
.s12-rows.size-s { gap: 4px; padding-top: 34px; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.s12-rows.size-s .s12-row { height: 58px; grid-template-columns: 60px 1fr 70px; border-radius: 10px; }
.s12-rows.size-s .s12-row.top { height: 58px; }
.s12-rows.size-s .s12-rank { height: 48px; }
.s12-rows.size-s .s12-rank .blot { width: 44px; height: 42px; left: 10px; }
.s12-rows.size-s .s12-rank b { font-size: 24px; }
.s12-rows.size-s .s12-name { font-size: 24px; padding-left: 4px; }
.s12-rows.size-s .s12-score { font-size: 30px; }
.s12-rows.size-s .s12-crown { left: 20px; top: -28px; width: 44px; height: 34px; }
.s12-note { font: 700 40px var(--f-hand); color: #1b1d22; transform: rotate(-24deg); display: grid; place-items: center; }
.s12-back { border: 3px solid #1c1f28; border-radius: 64px; font: 700 50px var(--f-brush); letter-spacing: 0.01em; background: #3f6efb; box-shadow: 0 8px 0 rgba(32, 35, 43, 0.12); text-transform: none; }

/* ---------------------------------------------------------------- S13 */
.s13-row { border: 2px solid #565659; border-radius: 12px; background: rgba(255, 252, 245, 0.6); display: grid; grid-template-columns: 138px 1fr 90px; align-items: center; padding: 0; text-align: left; }
.s13-row:hover, .s13-row.open { background: #fffcf5; }
.s13-ico { font-size: 58px; display: grid; place-items: center; }
.s13-ico.coral { color: #f25a4c; }
.s13-ico.cobalt { color: #2d6bf2; }
.s13-row-title { font: 700 32px var(--f-ui); font-stretch: 80%; color: #111; letter-spacing: 0.01em; }
.s13-chev { font-size: 30px; transition: transform 0.15s; }
.s13-row.open .s13-chev { transform: rotate(180deg); }
.s13-detail { background: #fffcf5; border: 2px solid #20232b; border-radius: 16px; padding: 26px 34px; overflow: auto; z-index: 3; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); }
.s13-detail h2 { margin: 0 0 12px; display: flex; align-items: center; gap: 14px; font: 700 34px var(--f-ui); font-stretch: 80%; }
.s13-detail h2 .s13-ico { font-size: 40px; }
.s13-detail h3 { margin: 14px 0 6px; font: 700 22px var(--f-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.s13-detail ul { margin: 0; padding-left: 26px; display: grid; gap: 6px; font: 400 21px/1.4 var(--f-body); }
.s13-detail ul.common { font-size: 18px; color: var(--ink-2); }
.s13-detail-close { position: absolute; right: 16px; top: 16px; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--graphite); background: #fff; font-size: 22px; display: grid; place-items: center; }
.s13-back { border-width: 2px; border-radius: 12px; font-size: 36px; font-weight: 700; font-stretch: 80%; gap: 30px; background: transparent; }
.s13-back .ico { font-size: 36px; }

.ctl-pill.dev { border-style: dashed; border-color: #2a5afd; color: #2a5afd; }