/* Page 56 · THE FOUR VISUAL CALLS · 56_page.css (owner: PAGE56). On top of ../kit.css + fbkit.css + 58k.css (the page-38 /
   page-58 theme: DARK VIVID chrome, ink #1D1B24, cream, yellow, Lilita One + Rubik). */
:root { --gold: #FFD23F; --gold-hi: #FFF3B0; --gold-lo: #E8A500; --mint: #7CFFA3; --hot: #FF4FA3; --sky: #3FEAF5; --red: #FF4F6A; --violet: #8A5CFF; }
body.p56 { padding-bottom: 140px; }
.p56 .kwrap58 { max-width: 1400px; }
.p56 [hidden] { display: none !important; }

/* ------------------------------------------------------------------ players (page 58's, plus ours) */
.p56p .kp__ovs .odot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); background: var(--oc, var(--gold)); vertical-align: -1px; }
.p56p--noskip .kp__skip { display: none; }
.p56p .kp__ovn { max-width: 680px; }
.p56p .scrub__beats span { white-space: nowrap; overflow: hidden; }
.rmstage { position: absolute; inset: 0; overflow: hidden; background: #140D30; }
.kstage { background: #0B0820; }

/* ------------------------------------------------------------------ hero */
.hero56 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 44px; align-items: center; padding: 40px 0 18px; }
.hero56 .htitle__b { font-size: clamp(54px, 7.2vw, 112px); }
.hero56__lede { margin: 0 0 16px; font-size: 16px; color: var(--cream-2); max-width: 60ch; }
.hero56__lede b { color: #fff; }
.saids56 { display: grid; gap: 8px; margin-bottom: 16px; }
.saids56 .said span { font-size: 13.5px; }
.saids56 .said i { flex: none; font: 400 12px / 1 var(--f-display); font-style: normal; letter-spacing: 0.06em; color: var(--cream-3); margin-left: auto; padding-left: 10px; white-space: nowrap; }
.asks56 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.asks56 a { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 11px; align-items: start; padding: 11px 12px 12px; text-decoration: none; border: 3px solid var(--ink); border-radius: 16px; background: var(--card-2); box-shadow: 3px 5px 0 var(--ink); transition: transform 0.15s; }
.asks56 a:hover { transform: translateY(-3px) rotate(-0.6deg); }
.asks56 a i { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; font: 400 21px / 1 var(--f-display); font-style: normal; color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 2px 3px 0 var(--ink); }
.asks56 a b { font: 400 16px / 1.1 var(--f-display); letter-spacing: 0.04em; color: #fff; }
.asks56 a span { font-size: 12.5px; line-height: 1.35; color: var(--cream-3); }
.asks56 a em { position: absolute; top: -10px; right: 10px; font: 400 11px / 1 var(--f-display); letter-spacing: 0.06em; padding: 4px 7px 3px; border-radius: 7px; border: 2px solid var(--ink); color: var(--ink); background: var(--mint); transform: rotate(3deg); }
.asks56 a em.pk { background: linear-gradient(180deg, #FFB0D8, var(--hot)); }
/* the real captures, dealt like cards */
.deck56 { position: relative; min-height: 520px; }
.deck56 figure { position: absolute; margin: 0; width: 78%; border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; background: #0B0820; box-shadow: 6px 10px 0 var(--ink), 0 22px 40px rgba(0, 0, 0, 0.45); transition: transform 0.25s var(--spring, ease); }
.deck56 figure img { display: block; width: 100%; height: auto; aspect-ratio: 2556 / 1179; object-fit: cover; }
.deck56 figure:nth-of-type(1) { left: 0; top: 0; transform: rotate(-4deg); z-index: 1; }
.deck56 figure:nth-of-type(2) { right: 0; top: 150px; transform: rotate(3deg); z-index: 2; }
.deck56 figure:nth-of-type(3) { left: 6%; top: 310px; transform: rotate(-1.5deg); z-index: 3; }
.deck56 figure:hover { transform: rotate(0deg) scale(1.03); z-index: 5; }
.deck56 figcaption { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 12px; border: 2.5px solid var(--ink); background: rgba(14, 10, 29, 0.88); font: 700 12px / 1.3 var(--f-body); color: var(--cream); max-width: calc(100% - 20px); }
.deck56 figcaption b { flex: none; font: 400 12px / 1 var(--f-display); letter-spacing: 0.08em; padding: 4px 7px 3px; border-radius: 6px; border: 2px solid var(--ink); color: #fff; background: var(--red); }
.deck56__stamp { position: absolute; right: 2%; top: 4px; z-index: 6; font: 400 15px / 1 var(--f-display); letter-spacing: 0.1em; color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); padding: 8px 12px 6px; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 4px 0 var(--ink); transform: rotate(4deg); }

/* the gold-name rule */
.goldrule56 { display: flex; gap: 14px; align-items: center; margin: 22px 0 0; padding: 12px 16px; border: 3px dashed rgba(255, 210, 63, 0.55); border-radius: 18px; background: linear-gradient(90deg, rgba(255, 210, 63, 0.09), rgba(255, 210, 63, 0.02)); }
.goldrule56 canvas { flex: none; width: 150px; height: 44px; }
.goldrule56 span { font-size: 14px; color: var(--cream-2); }
.goldrule56 b { color: var(--gold); }

/* ------------------------------------------------------------------ sections */
.sec56 { padding: 64px 0 8px; }
.sec56 .sech p b { color: #fff; }
.tag--done { color: var(--ink); background: var(--mint); }
.tag--pick { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); }
.tag--you { color: #fff; background: linear-gradient(180deg, #FF7CC0, var(--hot)); }
/* the decided rules, in the room's own panel look */
.rules56 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 22px; padding: 16px 18px; border: 3px solid var(--ink); border-radius: 20px; background: linear-gradient(180deg, #3A3358, #26213D); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 5px 8px 0 var(--ink); }
.rules56__st { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; border: 3px dashed var(--mint); color: var(--mint); font: 400 15px / 1.05 var(--f-display); letter-spacing: 0.06em; text-align: center; transform: rotate(-10deg); }
.rules56 ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 20px; }
.rules56 li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.45; color: var(--cream-2); }
.rules56 li::before { content: ""; position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 4px; border: 2px solid var(--ink); background: var(--mint); box-shadow: 1px 2px 0 var(--ink); }
.rules56 li b { color: #fff; }
/* "today" — the real capture of the problem */
.today56 { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; margin: 0 0 22px; padding: 14px; border: 3px solid var(--ink); border-radius: 20px; background: linear-gradient(110deg, #3B1E36, #1D1630 65%); box-shadow: 5px 8px 0 var(--ink); }
.today56 figure { position: relative; margin: 0; border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; }
.today56 img { display: block; width: 100%; height: auto; }
.today56 figure i { position: absolute; border: 3px solid #FF3352; border-radius: 12px; box-shadow: 0 0 0 3px rgba(29, 27, 36, 0.8), 0 0 18px rgba(255, 51, 82, 0.6); }
.today56 figure em { position: absolute; font: 400 13px / 1 var(--f-display); letter-spacing: 0.06em; font-style: normal; padding: 5px 8px 4px; border-radius: 7px; border: 2px solid var(--ink); color: #fff; background: #FF3352; transform: rotate(-3deg); white-space: nowrap; }
.today56 h3 { margin: 0 0 6px; font: 400 24px / 1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.today56 h3 small { display: inline-block; margin-right: 8px; font-size: 13px; padding: 4px 8px 3px; border-radius: 7px; color: #fff; background: #FF3352; border: 2px solid var(--ink); -webkit-text-stroke: 0; vertical-align: 3px; letter-spacing: 0.08em; }
.today56 p { margin: 0; font-size: 14.5px; color: var(--cream-2); }
.today56 p b { color: #fff; }

/* ------------------------------------------------------------------ one option: a phone + its console */
.opts56 { display: grid; gap: 34px; }
.opt56 { position: relative; display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.62fr); gap: 22px; align-items: start; padding: 18px; border: 3px solid var(--ink); border-radius: 26px; background: linear-gradient(160deg, rgba(58, 48, 96, 0.55), rgba(22, 16, 40, 0.55)); box-shadow: 6px 10px 0 var(--ink); }
.opt56:nth-child(even) { grid-template-columns: minmax(320px, 0.62fr) minmax(0, 1.38fr); }
.opt56:nth-child(even) .opt56__stage { order: 2; }
.opt56.is-picked { box-shadow: 0 0 0 4px var(--gold), 6px 10px 0 var(--ink), 0 0 36px rgba(255, 210, 63, 0.25); }
.opt56__stage { min-width: 0; }
.opt56__info { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 12px; margin-top: 14px; align-items: start; }
.opt56__info--one { grid-template-columns: minmax(0, 1fr); }
.opt56__under { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.opt56__under .lbl { font: 800 11px / 1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); }
/* the console: the game's dark panel */
.con56 { position: relative; display: grid; gap: 12px; align-content: start; padding: 16px 16px 14px; border: 3px solid var(--ink); border-radius: 20px; background: linear-gradient(180deg, #3A3358, #241F3B); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.09), 4px 6px 0 var(--ink); min-width: 0; }
.con56__h { display: flex; align-items: center; gap: 12px; }
.con56__n { flex: none; display: grid; place-items: center; width: 52px; height: 52px; font: 400 30px / 1 var(--f-display); color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); border: 3px solid var(--ink); border-radius: 15px; box-shadow: 3px 4px 0 var(--ink); transform: rotate(-4deg); }
.con56__h h3 { margin: 0; font: 400 27px / 1 var(--f-display); letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.con56__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.bdg { display: inline-block; padding: 4px 8px 3px; font: 400 11.5px / 1 var(--f-display); letter-spacing: 0.08em; color: var(--ink); border: 2px solid var(--ink); border-radius: 7px; background: var(--mint); }
.bdg--rec { background: linear-gradient(180deg, var(--yellow-hi), var(--yellow)); }
.bdg--you { color: #fff; background: linear-gradient(180deg, #FF7CC0, var(--hot)); }
.bdg--built { color: #fff; background: linear-gradient(180deg, #7FA8FF, #3A6AE0); }
.bdg--rm { background: #C9CED6; }
.con56__why { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cream-2); }
.con56__why b { color: #fff; }
/* the spec: WHEN / WHERE / HOW BIG per word */
.spec56 { display: grid; gap: 5px; }
.spec56__r { display: grid; grid-template-columns: 92px repeat(3, minmax(0, 1fr)); gap: 5px; align-items: stretch; }
.spec56__r > * { padding: 6px 7px 5px; border-radius: 9px; background: #17141F; border: 2px solid #0F0D16; font: 700 11.5px / 1.25 var(--f-body); color: var(--cream-2); min-width: 0; }
.spec56__r > b { display: flex; align-items: center; gap: 6px; font: 400 12.5px / 1.05 var(--f-display); letter-spacing: 0.04em; color: #fff; background: #221D33; }
.spec56__r > b i { flex: none; width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--ink); background: var(--c, var(--gold)); }
.spec56__r--h > * { background: transparent; border-color: transparent; padding-top: 0; padding-bottom: 0; font: 800 10px / 1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); }
.spec56__r .none { color: rgba(255, 246, 224, 0.4); }
/* the screen map (where the furniture sits) + the timing ribbon (when) */
.map56 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.map56 svg { display: block; width: 100%; height: auto; border-radius: 12px; border: 2.5px solid var(--ink); background: #0F0B22; }
.map56__l { font: 800 10px / 1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); }
.rib56 { position: relative; height: 46px; border-radius: 11px; border: 2.5px solid var(--ink); background: #120E22; overflow: hidden; }
.rib56__parts { position: absolute; left: 0; right: 0; top: 0; height: 12px; display: flex; }
.rib56__parts i { height: 12px; border-right: 2px solid var(--ink); font: 800 7.5px / 12px var(--f-body); letter-spacing: 0.1em; color: rgba(29, 27, 36, 0.85); padding-left: 4px; overflow: hidden; white-space: nowrap; font-style: normal; }
.rib56__ev { position: absolute; top: 15px; height: 13px; border-radius: 4px; border: 1.5px solid var(--ink); background: var(--c); }
.rib56__ev b { position: absolute; left: 3px; top: 0; font: 800 7.5px / 11px var(--f-body); letter-spacing: 0.06em; color: var(--ink); white-space: nowrap; }
.rib56__mk { position: absolute; top: 12px; bottom: 0; width: 2px; background: rgba(255, 246, 224, 0.5); }
.rib56__mk b { position: absolute; left: 4px; bottom: 2px; font: 800 7.5px / 1 var(--f-body); letter-spacing: 0.08em; color: var(--cream-3); white-space: nowrap; }
/* pros / cons */
.pc56 { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.pc56 li { position: relative; padding-left: 21px; font-size: 13px; line-height: 1.42; color: var(--cream-2); }
.pc56 li::before { position: absolute; left: 0; top: 0; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 5px; border: 2px solid var(--ink); font: 400 12px / 1 var(--f-display); color: var(--ink); }
.pc56 li.p::before { content: "+"; background: var(--mint); }
.pc56 li.c::before { content: "\2013"; background: #FF8FA8; }
.pc56 li b { color: #fff; }
.con56__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 4px; border-top: 2px solid rgba(255, 246, 224, 0.08); }
.con56__foot small { font: 700 11.5px / 1.3 var(--f-body); color: var(--cream-3); }
/* beat list (clickable: jumps the phone there) */
.beats56 { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 5px; }
.beats56 button { display: flex; align-items: center; gap: 6px; padding: 5px 7px; cursor: pointer; text-align: left; border: 2px solid var(--ink); border-radius: 9px; background: #221B38; color: var(--cream); font: inherit; min-width: 0; }
.beats56 button:hover { transform: translateY(-2px); background: #2E2650; }
.beats56 i { flex: none; display: grid; place-items: center; min-width: 22px; height: 18px; padding: 0 3px; font: 800 9.5px / 1 var(--f-body); font-style: normal; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); border-radius: 6px; }
.beats56 b { flex: 1; min-width: 0; font: 400 12px / 1.1 var(--f-display); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the set-level demo controls */
.ctl56 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 16px; background: var(--card-2); box-shadow: 3px 5px 0 var(--ink); }
.ctl56 .lbl { font: 800 11px / 1 var(--f-body); letter-spacing: 0.14em; color: var(--cream-3); }
.ctl56 .seg button { height: 34px; }
.ctl56 .note { font-size: 12.5px; color: var(--cream-3); }
.seg button .sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 2px solid var(--ink); background: var(--c); vertical-align: -1px; }
.seg button img, .seg button canvas { width: 20px; height: 20px; }
.favs56 { display: flex; flex-wrap: wrap; gap: 8px; }
.fav56 { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 5px; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 22px; background: #1B1530; color: var(--cream); font: 400 14px / 1 var(--f-display); letter-spacing: 0.04em; box-shadow: 2px 3px 0 var(--ink); }
.fav56 span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(18, 12, 36, 0.92); border: 2.5px solid var(--ink); }
.fav56 span svg { width: 22px; height: 22px; }
.fav56.is-on { background: var(--c); color: var(--ink); }
.fav56.is-on span { background: #fff; }
/* the arena chips under a round-start phone */
.ars56 { display: flex; flex-wrap: wrap; gap: 6px; }
.ar56 { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 4px; cursor: pointer; border: 2.5px solid var(--ink); border-radius: 11px; background: #1B1530; color: var(--cream-2); font: 400 13px / 1 var(--f-display); letter-spacing: 0.04em; box-shadow: 2px 3px 0 var(--ink); }
.ar56 img { width: 46px; height: 24px; object-fit: cover; border-radius: 7px; border: 2px solid var(--ink); }
.ar56.is-on { color: var(--ink); background: linear-gradient(180deg, var(--yellow-hi), var(--yellow) 60%, var(--yellow-lo)); }
.ar56:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------------ set A: the two room phones + the real captures */
.rooms56 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.rooms56 > div { min-width: 0; }
.rooms56 h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 400 20px / 1 var(--f-display); letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.rooms56 h4 small { font: 700 12.5px / 1.3 var(--f-body); color: var(--cream-3); -webkit-text-stroke: 0; letter-spacing: 0; }
.built56 { margin-top: 22px; padding: 14px; border: 3px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 4px 6px 0 var(--ink); }
.built56__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.built56__h b { font: 400 18px / 1 var(--f-display); letter-spacing: 0.04em; color: var(--gold); }
.built56__h span { font-size: 13px; color: var(--cream-3); }
.built56__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.built56__g figure { margin: 0; min-width: 0; }
.built56__g img { display: block; width: 100%; height: auto; aspect-ratio: 2556 / 1179; object-fit: cover; border-radius: 12px; border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); }
.built56__g figcaption { margin-top: 7px; font: 700 12px / 1.35 var(--f-body); color: var(--cream-2); }
.built56__g figcaption b { display: block; font: 400 13.5px / 1.1 var(--f-display); letter-spacing: 0.04em; color: #fff; }

/* ------------------------------------------------------------------ summary */
.sum56 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sum56 > div { padding: 14px; border: 3px solid var(--ink); border-radius: 18px; background: var(--card-2); box-shadow: 4px 6px 0 var(--ink); }
.sum56 h4 { margin: 0 0 6px; font: 400 14px / 1 var(--f-display); letter-spacing: 0.1em; color: var(--cream-3); }
.sum56 .pickline { margin: 0 0 8px; font: 400 20px / 1.05 var(--f-display); letter-spacing: 0.02em; color: var(--gold); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.sum56 p { margin: 0; font-size: 13.5px; color: var(--cream-2); }
.notes56 { margin: 22px 0 0; padding: 14px 18px; border: 3px dashed rgba(255, 246, 224, 0.2); border-radius: 18px; }
.notes56 h4 { margin: 0 0 8px; font: 400 16px / 1 var(--f-display); letter-spacing: 0.08em; color: var(--cream-2); }
.notes56 ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: var(--cream-2); }
.notes56 b { color: #fff; }
.nextp56 { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* ================================================================== THE WI-FI ROOM (998 x 460, the SPOTLIGHT look) */
.wr { position: absolute; inset: 0; width: 998px; height: 460px; overflow: hidden; color: #fff; font-family: "Lilita One", sans-serif; user-select: none; }
.wr b, .wr small { font-weight: 400; }
.wr svg { display: block; }
.wr__bg { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 0%, #3B2E74 0%, rgba(59, 46, 116, 0) 70%), linear-gradient(180deg, #2C235A 0%, #1F1746 40%, #160F36 70%, #120B2D 100%); }
.wr__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1.1px, transparent 1.5px); background-size: 9px 9px; }
.wr__floor { position: absolute; left: 0; right: 0; top: 350px; bottom: 0; background: linear-gradient(180deg, rgba(64, 54, 128, 0.35), rgba(14, 9, 34, 0) 30%), linear-gradient(180deg, #1B1440, #100A28); border-top: 1px solid rgba(160, 150, 230, 0.18); }
.wr__glow { position: absolute; left: 60px; top: 330px; width: 200px; height: 130px; background: radial-gradient(closest-side, rgba(255, 196, 40, 0.28), rgba(255, 196, 40, 0)); }
.wr .stroke, .wr__back span, .wr__title b, .wr__tab b, .wr__navi b, .wr__cell h4, .wr__rh b, .wr__nm, .wr__rw, .wr__rs { -webkit-text-stroke: 3.4px #1D1B24; paint-order: stroke fill; }
.wr__back { position: absolute; left: 80px; top: 11px; width: 120px; height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0; border: 2.5px solid #17151F; border-radius: 15px; background: linear-gradient(180deg, #37315B, #26213F); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.07), 0 5px 0 #121019; color: #fff; font: 400 19.5px / 1 "Lilita One", sans-serif; letter-spacing: 0.03em; }
.wr__back svg { width: 18px; height: 16px; }
.wr__title { position: absolute; left: 216px; top: 14px; display: flex; align-items: center; gap: 10px; }
.wr__title > svg { width: 32px; height: 26px; }
.wr__title div { display: grid; gap: 1px; }
.wr__title b { font-size: 27px; line-height: 1; letter-spacing: 0.02em; -webkit-text-stroke-width: 4px; }
.wr__title small { font: 800 12.5px / 1 Rubik, sans-serif; letter-spacing: 0.07em; color: #FFC93A; }
.wr__tabs { position: absolute; left: 435px; top: 10px; display: flex; gap: 7.6px; }
.wr__tab { position: relative; width: 63px; height: 56px; display: grid; justify-items: center; align-content: end; padding-bottom: 5px; border: 2.5px solid #17151F; border-radius: 12px; background: linear-gradient(180deg, #403A66, #2C2749); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 4px 0 #121019; }
.wr__strip { position: absolute; left: 4px; right: 4px; top: 3px; height: 4px; border-radius: 2px; background: var(--tc); }
.wr__gun { position: absolute; left: 11px; top: 10px; width: 40px; height: 22px; }
.wr__pro { position: absolute; left: 22px; top: 10px; width: 19px; height: 19px; }
.wr__tab b { font-size: 12.4px; line-height: 0.95; text-align: center; letter-spacing: 0.02em; -webkit-text-stroke-width: 3px; }
.wr__tab--mine { background: rgba(18, 14, 34, 0.6); border: 2.5px dashed rgba(255, 255, 255, 0.16); box-shadow: none; }
.wr__plus { position: absolute; top: 4px; font-size: 19px; color: #fff; -webkit-text-stroke: 3px #1D1B24; paint-order: stroke fill; }
.wr__nav { position: absolute; left: 80px; top: 80px; width: 120px; }
.wr__navi { position: absolute; left: 0; width: 112px; height: 62px; display: flex; align-items: center; gap: 10px; padding-left: 15px; border: 2.5px solid #17151F; border-radius: 15px; background: linear-gradient(180deg, #403A66, #2C2749); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 5px 0 #121019; }
.wr__navi:nth-child(1) { top: 0; } .wr__navi:nth-child(2) { top: 72px; } .wr__navi:nth-child(3) { top: 145px; } .wr__navi:nth-child(4) { top: 215px; }
.wr__navi svg { width: 20px; height: 20px; flex: none; }
.wr__navi b { font-size: 17px; letter-spacing: 0.02em; }
.wr__lock { position: absolute; right: 6px; top: 4px; width: 10px; height: 12px; }
.wr__lock svg { width: 10px; height: 12px; }
.wr__navi--on { top: 287px !important; left: 7px; width: 113px; height: 57px; color: #1D1B24; border-color: #1D1B24; background: linear-gradient(180deg, #FFE36A, #FFC21A 60%, #F2AE00); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 5px 0 #8A6400, 0 0 26px rgba(255, 196, 40, 0.35); }
.wr__navi--on b { color: #1D1B24; -webkit-text-stroke: 0; }
.wr__ptr { position: absolute; right: -10px; top: 50%; margin-top: -7px; width: 0; height: 0; border-left: 9px solid #FFC21A; border-top: 7px solid transparent; border-bottom: 7px solid transparent; filter: drop-shadow(1px 1px 0 #1D1B24); }
.wr__mid { position: absolute; left: 216px; top: 80px; width: 455px; height: 353px; display: grid; grid-template-columns: 208px 208px; column-gap: 13px; row-gap: 0; align-content: start; padding: 11px 13px; border: 2.5px solid #17151F; border-radius: 15px; background: linear-gradient(180deg, #352F53, #27223F); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 5px 0 #121019; }
.wr__cell { height: 69px; }
.wr__cell h4 { margin: 0 0 6px; font-size: 16.5px; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.wr__cell h4 small { margin-left: 6px; font: 400 12.8px / 1 "Lilita One", sans-serif; color: #D6CFBF; -webkit-text-stroke: 0; letter-spacing: 0.04em; }
.wr__field, .wr__tog { position: relative; height: 37px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: #1A1628; box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 0 2px #121019; }
.wr__field b { font-size: 15.5px; letter-spacing: 0.03em; }
.wr__arr { position: absolute; top: 7px; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(180deg, #FFE36A, #F5B800); border: 2px solid #1D1B24; }
.wr__arr::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 5px; border-right: 2.6px solid #1D1B24; border-bottom: 2.6px solid #1D1B24; transform: rotate(-45deg); }
.wr__arr--l { left: 5px; } .wr__arr--l::after { transform: rotate(135deg); left: 8px; }
.wr__arr--r { right: 5px; }
.wr__tog { justify-content: space-around; padding: 0 6px; }
.wr__tog span { flex: 1; text-align: center; font-size: 14.5px; letter-spacing: 0.03em; color: #9C97AE; line-height: 21px; border-radius: 7px; }
.wr__tog span.is-on { color: #1D1B24; background: linear-gradient(180deg, #FFE36A, #FFC93A 60%, #F2B000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); margin: 0 3px; }
.wr__code { display: flex; gap: 6px; }
.wr__code i { display: grid; place-items: center; width: 27px; height: 31px; font: 400 20px / 1 "Lilita One", sans-serif; font-style: normal; color: #1D1B24; border-radius: 6px; background: linear-gradient(180deg, #FFFFFF, #E9E4F4); border: 2px solid #1D1B24; box-shadow: 0 3px 0 #121019; }
.wr__me { color: #FFC93A; }
.wr__dash { height: 44px; margin-top: -2px; display: grid; place-items: center; border: 2.5px dashed rgba(214, 207, 191, 0.55); border-radius: 12px; font-size: 14px; letter-spacing: 0.03em; color: #E6DFD0; }
.wr__info { grid-column: 1 / -1; height: 29px; margin-top: 3px; display: flex; align-items: center; padding: 0 9px; border: 2.5px dashed #2FA9B8; border-radius: 10px; background: rgba(28, 54, 70, 0.35); font: 700 13px / 1.2 Rubik, sans-serif; color: #F2EEF8; }
.wr__info--host { height: 46px; gap: 6px; margin-top: 2px; font-size: 12.5px; }
.wr__info--host svg { width: 18px; height: 14px; flex: none; }
.wr__info--host b { font-weight: 900; }
.wr__cell--wide { grid-column: 1 / -1; height: 80px; }
.wr__codeRow { display: flex; align-items: center; gap: 12px; }
.wr__new { display: grid; place-items: center; height: 30px; padding: 0 14px; border-radius: 15px; border: 2.5px solid #17151F; background: linear-gradient(180deg, #403A66, #2C2749); font-size: 14px; letter-spacing: 0.03em; -webkit-text-stroke: 3px #1D1B24; paint-order: stroke fill; box-shadow: 0 3px 0 #121019; }
.wr__ip { display: grid; gap: 2px; }
.wr__ip small { font: 400 12.5px / 1 "Lilita One", sans-serif; color: #D6CFBF; letter-spacing: 0.03em; }
.wr__ip b { font-size: 17px; letter-spacing: 0.02em; }
.wr__right { position: absolute; left: 688px; top: 80px; width: 234px; height: 255px; padding: 0; border: 2.5px solid #17151F; border-radius: 15px; background: linear-gradient(180deg, #2E2948, #221E35); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05), 0 5px 0 #121019; }
.wr__rh { position: absolute; left: 10px; right: 10px; top: 11px; display: flex; align-items: center; gap: 8px; }
.wr__rh svg { width: 21px; height: 17px; }
.wr__rh b { font-size: 18.5px; letter-spacing: 0.03em; }
.wr__pub { margin-left: auto; padding: 2px 6px 1px; font-size: 12px; letter-spacing: 0.03em; color: #1D1B24; background: #8DEBFF; border: 2px solid #1D1B24; border-radius: 6px; }
.wr__rows { position: absolute; left: 10px; right: 10px; top: 41px; }
.wr__row { position: absolute; left: 0; right: 0; top: calc(var(--i) * 44px); height: 35px; display: flex; align-items: center; border-radius: 9px; background: #17151F; box-shadow: 0 0 0 2px #100E16; transition: top 0.3s; }
.wr.is-four .wr__row { top: calc(var(--i) * 40px); }
.wr__row.is-me { box-shadow: 0 0 0 2.5px #FFC93A, 0 0 12px rgba(255, 201, 58, 0.25); background: #1A1826; }
.wr__row.is-me .wr__nm { color: #FFC93A; }
.wr__row.is-gone { display: none; }
.wr__row--new { opacity: var(--j, 0); transform: translateX(calc((1 - var(--j, 0)) * 40px)); }
.wr__av { position: relative; flex: none; width: 26px; height: 29px; margin: 0 8px 0 7px; }
.wr__bust { width: 26px; height: 29px; }
.wr__ok, .wr__no { position: absolute; right: -5px; bottom: -3px; width: 13px; height: 13px; }
.wr__ok svg, .wr__no svg { width: 13px; height: 13px; }
.wr__ok { display: none; }
.wr__row.is-ready .wr__ok { display: block; }
.wr__row.is-ready .wr__no { display: none; }
.wr__nm { flex: 1; min-width: 0; font-size: 16px; letter-spacing: 0.03em; white-space: nowrap; }
.wr__tag { flex: none; margin-right: 8px; padding: 2px 6px 1px; font-size: 12.5px; letter-spacing: 0.03em; color: #1D1B24; border-radius: 4px; background: #FF8E8E; }
.wr__tag--host { background: linear-gradient(180deg, #FFE36A, #FFC21A); }
.wr__tag--ok { background: #7CFFA3; }
.wr__tag--no { background: #FF8E8E; }
.wr__row.is-pop .wr__tag { animation: rmpop 0.42s cubic-bezier(.3, 1.7, .5, 1); }
.wr__row.is-pop .wr__ok { animation: rmpop 0.42s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes rmpop { 0% { transform: scale(0.5); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.wr__open { position: absolute; left: 0; right: 0; top: 132px; height: 35px; display: grid; place-items: center; border: 2.5px dashed rgba(214, 207, 191, 0.55); border-radius: 11px; font-size: 14px; letter-spacing: 0.04em; color: #D6CFBF; transition: top 0.3s; }
.wr__open.is-down { top: 168px; }
.wr__count { position: absolute; left: 10px; top: 222px; font-size: 14px; letter-spacing: 0.04em; color: #D6CFBF; transition: top 0.3s; }
.wr.is-four .wr__count { top: 237px; }
.wr.is-four .wr__open.is-down { top: 161px; height: 29px; }
.wr__ready { position: absolute; left: 689px; top: 341px; width: 229px; height: 54px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 0; border: 2.5px solid #17151F; border-radius: 13px; background: linear-gradient(180deg, #7CF2A6 0%, #2FD06C 18%, #16AE52 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 5px 0 #0C4F27; color: #fff; font-family: "Lilita One", sans-serif; transition: transform 0.08s; }
.wr__ready.is-not { background: linear-gradient(180deg, #5B5292 0%, #3B3470 30%, #2A2452 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 5px 0 #15112B; }
.wr__ready.is-press, .wr__start.is-press { transform: translateY(3px) scale(0.98); }
.wr__rw { font-size: 27px; line-height: 1; letter-spacing: 0.03em; -webkit-text-stroke-width: 5px; }
.wr__rs { font-size: 13px; line-height: 1; letter-spacing: 0.04em; -webkit-text-stroke-width: 3px; }
.wr__startS { position: absolute; left: 689px; top: 406px; width: 229px; height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 8px; border-radius: 11px; background: #221B3E; box-shadow: 0 0 0 2px #15121F, 0 3px 0 #0D0B16; }
.wr__startL { display: flex; align-items: center; gap: 5px; font-size: 15px; letter-spacing: 0.03em; color: #6A6086; }
.wr__startL svg { width: 7px; height: 9px; color: #6A6086; }
.wr__startN { font-size: 13px; letter-spacing: 0.03em; color: #D6CFBF; }
.wr__startS.is-all { background: linear-gradient(180deg, #FFE36A, #FFC93A 55%, #F2B000); box-shadow: 0 0 0 2px #1D1B24, 0 3px 0 #8A6400; }
.wr__startS.is-all .wr__startL, .wr__startS.is-all .wr__startL svg, .wr__startS.is-all .wr__startN { color: #2A1F06; }
.wr__start { position: absolute; left: 689px; top: 344px; width: 229px; height: 81px; display: grid; place-items: center; align-content: center; gap: 2px; padding: 0; border: 2.5px solid #17151F; border-radius: 15px; background: linear-gradient(180deg, #B4B4B8, #8E8E93 55%, #7E7E84); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 5px 0 #3A3A40; font-family: "Lilita One", sans-serif; transition: transform 0.08s, filter 0.2s; }
.wr__startW { display: flex; align-items: center; gap: 8px; }
.wr__startW svg { width: 15px; height: 18px; color: #8C8C90; }
.wr__startW b { font-size: 37px; line-height: 0.95; letter-spacing: 0.03em; color: #9C9CA0; -webkit-text-stroke: 1.6px rgba(255, 255, 255, 0.35); paint-order: stroke fill; }
.wr__start .wr__startN { font-size: 14px; color: #6E6E74; letter-spacing: 0.05em; }
.wr__start.is-on { background: linear-gradient(180deg, #FFF3B0 0%, #FFD23F 34%, #F5A81C 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 5px 0 #8A5A00, 0 0 28px rgba(255, 196, 40, 0.45); animation: rmglow 1.4s ease-in-out infinite alternate; }
.wr__start.is-on .wr__startW svg { color: #2A1F06; }
.wr__start.is-on .wr__startW b { color: #2A1F06; -webkit-text-stroke: 0; }
.wr__start.is-on .wr__startN { color: #4A3608; }
@keyframes rmglow { from { filter: brightness(1); } to { filter: brightness(1.08); } }
html.rm .wr__start.is-on { animation: none; }
.wr__fx { position: absolute; inset: 0; pointer-events: none; }
.wr__toast { position: absolute; left: 50%; top: 380px; transform: translate(-50%, 12px) scale(0.9); opacity: 0; padding: 7px 16px 6px; font-size: 16px; letter-spacing: 0.05em; color: #1D1B24; background: linear-gradient(180deg, #FFF3B0, #FFD23F); border: 2.5px solid #1D1B24; border-radius: 13px; box-shadow: 3px 4px 0 #1D1B24; white-space: nowrap; transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1), opacity 0.2s; }
.wr__toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.wr__black { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; opacity: 0; background: radial-gradient(60% 70% at 50% 50%, #241B4A, #07040F); }
.wr__black b { font-size: 46px; letter-spacing: 0.06em; color: #FFD23F; -webkit-text-stroke: 7px #1D1B24; paint-order: stroke fill; }
.wr__black small { font: 800 14px / 1 Rubik, sans-serif; letter-spacing: 0.14em; color: #CFC8E8; }
.wr__finger { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle at 35% 30%, #fff, #E8E4F0 70%); border: 2.6px solid rgba(29, 27, 36, 0.85); box-shadow: 2px 4px 0 rgba(8, 6, 20, 0.35); }
.wr__finger.is-down { background: radial-gradient(circle at 35% 30%, #fff, #FFE28C 70%); box-shadow: 1px 1px 0 rgba(8, 6, 20, 0.35), 0 0 0 7px rgba(255, 246, 224, 0.35); }
.wr--host .wr__row--new { display: flex; }
.wr--guest .wr__row--new { display: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .hero56 { grid-template-columns: minmax(0, 1fr); }
  .deck56 { min-height: 0; display: grid; gap: 14px; }
  .deck56 figure { position: relative; width: 100%; left: auto !important; right: auto !important; top: auto !important; transform: none !important; }
  .opt56, .opt56:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .opt56__info { grid-template-columns: minmax(0, 1fr); }
  .opt56:nth-child(even) .opt56__stage { order: 0; }
  .rooms56 { grid-template-columns: minmax(0, 1fr); }
  .sum56 { grid-template-columns: 1fr 1fr; }
  .today56 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rules56 { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .rules56 ul { grid-template-columns: minmax(0, 1fr); }
  .rules56__st { position: absolute; right: 8px; top: -18px; width: 58px; height: 58px; font-size: 11px; background: #26213D; }
  .map56 { max-width: 560px; }
  .built56__g { grid-template-columns: 1fr 1fr; }
  .asks56 { grid-template-columns: minmax(0, 1fr); }
  .sum56 { grid-template-columns: minmax(0, 1fr); }
  .opt56 { padding: 10px; border-radius: 20px; }
  .spec56__r { grid-template-columns: 70px repeat(3, minmax(0, 1fr)); }
  .spec56__r > * { font-size: 10.5px; padding: 5px; }
  .goldrule56 { flex-direction: column; align-items: flex-start; }
  .saids56 .said { flex-wrap: wrap; }
  .saids56 .said i { margin-left: 0; padding-left: 0; }
}