/* header, main, footer, page widths */
/* header */
header.top {
  display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(20px, 3vw, 56px); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10; background: rgba(15, 15, 18, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.brand { font-weight: 700; font-size: 16px; border: 0; display: flex; align-items: center; gap: 10px; }
header .left { display: flex; align-items: center; gap: 44px; margin-right: auto; }
header .left a.cta { color: var(--gold); border: 0; position: relative; padding: 2px 0; }
header .left a.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--mid) var(--ease); }
header .left a.cta.on::after, header .left a.cta:hover::after { transform: scaleX(1); }
.dohyo { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--gold); display: inline-block; box-shadow: 0 0 0 0 rgba(201, 162, 74, .0); transition: box-shadow var(--mid) var(--ease), transform var(--mid) var(--ease); }
.brand:hover .dohyo { box-shadow: 0 0 14px 1px rgba(201, 162, 74, .45); transform: rotate(90deg) scale(1.1); transition-timing-function: var(--ease-pop); }
header nav { display: flex; gap: 18px; align-items: center; }
header nav a { border: 0; color: var(--dim); position: relative; padding: 2px 0; }
header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--mid) var(--ease); }
header nav a.on::after, header nav a:hover::after { transform: scaleX(1); }
header nav a.on, header nav a:hover { color: var(--fg); }
header nav a.cta { color: var(--gold); }
/* the sound dropdown: a small pill, gold when on */
select.sound { width: auto; padding: 3px 24px 3px 10px; font: inherit; font-size: 12px; line-height: 1; border-radius: 999px; background: transparent; color: var(--dim); border: 1px solid var(--line); cursor: pointer; margin-left: 4px;
  -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%238f8e97'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
select.sound:hover { color: var(--fg); border-color: var(--gold); box-shadow: none; }
select.sound.on { color: var(--gold); border-color: var(--gold); }
select.sound option { background: var(--panel); color: var(--fg); }
.soundbar { display: inline-flex; align-items: center; gap: 8px; flex: none; position: relative; }
input.volume { width: 0; opacity: 0; padding: 0; margin: 0; border: 0; background: transparent; -webkit-appearance: none; appearance: none; height: 14px; cursor: pointer; transition: width var(--mid) var(--ease), opacity var(--mid) var(--ease); }
.soundbar:has(select.sound.on) input.volume { width: 72px; opacity: 1; }
input.volume::-webkit-slider-runnable-track { height: 2px; background: var(--line); border-radius: 1px; }
input.volume::-moz-range-track { height: 2px; background: var(--line); border-radius: 1px; }
input.volume::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: var(--gold); border: 0; }
input.volume::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 0; }
input.volume:focus { outline: none; box-shadow: none; }
main { transition: opacity var(--t-switch-fade, 320ms) var(--ease); }
main.switching { opacity: 0; }
main { flex: 1; padding: 28px clamp(20px, 3vw, 56px) 48px; width: 100%; }
footer { position: relative; flex: none; padding: 12px clamp(20px, 3vw, 56px) 14px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; text-align: center; background: rgba(15, 15, 18, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
footer p { margin: 0; }
footer .crawl { overflow: hidden; white-space: nowrap; line-height: 1.3; margin: 0 calc(-1 * clamp(20px, 3vw, 56px)); width: calc(100% + 2 * clamp(20px, 3vw, 56px)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
footer .track { display: inline-flex; gap: 48px; padding-right: 48px; animation: crawl 105s linear infinite; will-change: transform; }
footer .crawl:hover .track { animation-play-state: paused; }
footer .item { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--fg); }
footer .item a { border: 0; } footer .item a:hover { color: var(--gold); }
/* a sponsor with a logo rides the crawl at text height, never taller */
footer .item img.sponsor-logo { height: 1.15em; max-width: 130px; object-fit: contain; vertical-align: -0.2em; filter: grayscale(1) opacity(.8); transition: filter var(--slow, .3s); }
footer .item a:hover img.sponsor-logo { filter: none; }
footer .sep { color: var(--gold); font-size: 14px; }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
footer .advertise { position: absolute; right: 12px; bottom: 4px; font-size: 10px; color: var(--dim); border-bottom-color: transparent; }
footer .advertise:hover { color: var(--gold); border-bottom-color: var(--gold); }
section.narrow { max-width: 1200px; margin: 0 auto; }
.prompt-top { max-width: 1400px; margin: 0 auto; padding: 8px 0 34px; }
.prompt-top h2 { margin-bottom: 14px; }
.prompt-top pre.prompt { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.7; padding: clamp(16px, 4vw, 48px); margin: 0 0 22px; }
.prompt-top p { font-size: 13.5px; max-width: 80ch; }

/* about + rules pages */
.info { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.6fr); gap: clamp(24px, 4vw, 72px); max-width: 1400px; margin: 0 auto; padding: 34px 0; border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.info h2 { font-size: 13px; letter-spacing: .1em; }
.info-head p { font-size: 13.5px; max-width: 34ch; }
.info-body { font-size: 15px; }
.info-body pre.prompt { font-size: 13.5px; line-height: 1.55; padding: 22px 26px; margin: 0; }
.info-body ul { margin: 0; padding-left: 18px; } .info-body li { margin-bottom: 14px; }
.info-body p { max-width: 68ch; margin-bottom: 1.4em; }
.rules-table td { padding: 18px 18px 18px 0; vertical-align: top; }
/* forms breathe on wide screens: fields left, pre-prompt right */
.enter form[data-enter], .manage form[data-enter] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 32px; padding: 26px 30px; border-radius: 12px; }
.enter form[data-enter] > *, .manage form[data-enter] > * { grid-column: 1; }
.enter form[data-enter] > label:has(textarea), .manage form[data-enter] > label:has(textarea) { grid-column: 2; grid-row: 1 / span 8; display: flex; flex-direction: column; }
.enter form[data-enter] label:has(textarea) textarea, .manage form[data-enter] label:has(textarea) textarea { flex: 1; min-height: 320px; resize: vertical; }
.enter form[data-enter] button[type=submit], .manage form[data-enter] button[type=submit] { justify-self: start; }
.manage form[data-enter] > h3, .manage form[data-enter] > .grid2, .manage form[data-enter] > p, .manage form[data-enter] > label.check { grid-column: 1; }

/* the gear beside the sound: how it looks and sounds */
.soundbar a.gear { border: 0; color: var(--dim); font-size: 15px; line-height: 1; padding: 2px 4px; text-decoration: none; }
.soundbar a.gear:hover { color: var(--gold); }