/* Join page in the owner's chosen tone: plan rows left, steps right. Builds on base.css + claim.css. */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1.5px solid rgba(255, 122, 26, .8); box-shadow: 0 0 18px rgba(255, 122, 26, .2); color: var(--text); font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.pill b { color: var(--accent2); }
.pill .live-dot { background: #ffb21a; box-shadow: 0 0 8px #ff9a1a; }
.co { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; align-items: start; padding-top: 36px; }
@media (max-width: 880px) { .co { grid-template-columns: 1fr; gap: 30px; padding-top: 16px; max-width: 560px; } }
.co-back { display: inline-flex; align-items: center; min-height: 36px; color: var(--mute); text-decoration: none; font-size: 14px; }
.co-sum h1 { margin: 6px 0 0; font: 800 clamp(38px, 5.4vw, 52px)/1.02 var(--f-display); letter-spacing: -.02em; color: #fbe9d7; }
.hl { background: linear-gradient(180deg, #ffbe7a, #ff7a1a 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.co-l { margin: 10px 0 0; color: var(--mute); }

.pick { display: grid; gap: 12px; margin-top: 24px; }
.pk { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--line2);
  background: linear-gradient(180deg, rgba(40, 30, 25, .92), rgba(16, 12, 10, .96)); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .2s var(--ease); }
.pk:active { transform: scale(.99); }
.pk-n { display: grid; gap: 5px; min-width: 0; }
.pk-n b { font: 700 22px/1.1 var(--f-display); }
.pk-n small { color: var(--mute); font: 700 11.5px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.pk-n small i { font-style: normal; color: var(--accent2); }
.pk-p { font: 800 34px/1 var(--f-display); color: #fff3e6; }
.pk.on { border-color: rgba(255, 140, 50, .95); box-shadow: var(--glow); }
.pk:disabled { opacity: .35; cursor: default; }
.co-note { margin: 14px 4px 0; color: var(--mute2); font-size: 13px; }

.co-main { position: relative; padding-top: 48px; }
.co-main .peek { position: absolute; right: 18px; top: -10px; width: 170px; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); z-index: 2; animation: peek 5s ease-in-out infinite; }
@keyframes peek { 50% { transform: translateY(-6px) rotate(-2deg); } }
@media (max-width: 880px) { .co-main .peek { width: 130px; top: 0; } }
.co .flow, .co .board { position: relative; z-index: 1; max-width: none; margin: 0; }
.co .prog-label { margin: 0 0 10px; color: var(--accent2); font: 700 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.co .prog { height: 3px; background: var(--line); }
.co .prog i { background: linear-gradient(90deg, #ff9a3c, #ff6a10); }
.co .done-chips li { background: rgba(255, 122, 26, .12); color: var(--accent2); font: 600 13px/1 var(--f-body); }
.co .stepcard, .co .board { padding: 28px; border-radius: 22px; border: 1px solid rgba(255, 140, 50, .55);
  background: linear-gradient(180deg, rgba(40, 30, 25, .95), rgba(16, 12, 10, .97)); box-shadow: 0 0 30px rgba(255, 106, 16, .12), 0 20px 50px rgba(0, 0, 0, .45); animation: none; }
.co .stepcard .kick { display: none; }
.co .stepcard h3, .co .board h3 { margin: 0 0 8px; font: 800 30px/1.1 var(--f-display); letter-spacing: -.01em; color: #fbe9d7; }
.co .line { color: var(--mute); }
.co .field { border-radius: 99px; border-color: var(--line2); background: rgba(0, 0, 0, .35); padding-inline: 20px; }
.co .field:focus { border-color: var(--accent); }
.co .field-row .at { font: 700 22px/1 var(--f-display); color: var(--accent2); }
.co .stepcard .btn, .co .board .btn { background: linear-gradient(180deg, rgba(80, 40, 18, .9), rgba(45, 22, 10, .95)); color: var(--text); box-shadow: 0 0 0 1px rgba(255, 130, 50, .55) inset; }
.co .stepcard .go { background: linear-gradient(180deg, #ff9a3c, #ff6a10); color: var(--accent-ink); box-shadow: 0 0 0 1px rgba(255, 180, 110, .7) inset, 0 6px 26px rgba(255, 106, 16, .4); }
.co .board .kick { background: rgba(255, 122, 26, .12); color: var(--accent2); font: 700 11.5px/1 var(--f-body); letter-spacing: .12em; }
.bd-st.ok { color: var(--ok); }

.live { max-width: 1040px; margin-top: 70px; padding: 18px 22px 8px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(30, 22, 18, .7), rgba(14, 10, 8, .7)); }
.live h3 { margin: 0 0 6px; font: 700 12px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.feed { gap: 0 !important; }
.feed li { border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; padding: 12px 0 !important; }
.feed li:last-child { border-bottom: 0 !important; }
.feed .pf { background: var(--card2) !important; }
.feed .who b em.won { font-style: normal; color: var(--accent2); font-weight: 700; }
.feed .fs { border-color: var(--line2); color: var(--mute); font: 600 12px/1 var(--f-body); }
.sentfx h2 { font: 800 clamp(40px, 8vw, 76px)/1 var(--f-display); color: #fbe9d7; }
@media (max-width: 420px) { .nav .pill { padding: 7px 10px; font-size: 10.5px; letter-spacing: .08em; gap: 6px; } .brand { font-size: 17px; gap: 8px; } }
.ends { display: inline-flex; margin: 14px 0 0; padding: 7px 14px; border-radius: 99px; background: rgba(255, 122, 26, .12); color: var(--accent2); font: 700 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }