/* Shared title-menu and post-game options/scoring appearance. */
:root {
  --thread-purple-gradient: linear-gradient(110deg,#9d80ff,#c675ff 48%,#ff70cb);
  --thread-blue-gradient: linear-gradient(110deg,#55bdff,#748fff 48%,#b794ff);
}
.thread-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 16% 8%,#133e5055,transparent 32%),radial-gradient(circle at 88% 28%,#521b6050,transparent 34%),linear-gradient(#040712,#02040b);
}
.thread-menu-overlay.hidden { display: none; }
.thread-menu-shell { position: relative; width: min(100%,460px); margin: auto; }
.thread-menu-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.thread-menu-topbar[hidden] { display: none; }
.thread-home-link { text-decoration: none; pointer-events: auto; -webkit-tap-highlight-color: transparent; transition: transform .12s ease,filter .12s ease; transform-origin: center; }
.thread-home-link:active { transform: translateY(3px) scale(.96); filter: brightness(.88); }
.thread-home-link:focus-visible { outline: 2px solid #76f3ff; outline-offset: 5px; border-radius: 4px; }
.thread-menu-brand { font-size: 25px; font-weight: 1000; font-style: italic; letter-spacing: 5px; background: linear-gradient(90deg,#35efff,#fff 48%,#ff52d3); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px #2ce8ff55; }
.thread-menu-logo { position: relative; flex: 0 0 48px; width: 48px; height: 48px; }
.thread-menu-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

.thread-menu-card .action{width:100%;min-height:58px;margin-top:12px;border:1px solid #eaffff;border-radius:17px;background:linear-gradient(100deg,#31efff,#79f6df 45%,#ff56d6);box-shadow:0 6px 0 #08778b;color:#030713;font-size:16px;font-weight:1000;letter-spacing:1.5px}

.thread-menu-card .back{width:43px;height:43px;border:1px solid #4eefff6b;border-radius:50%;background:#09142b;color:#76f3ff;font-size:25px}

.thread-menu-card .board{display:grid;gap:7px;margin-top:15px}
.thread-menu-card{position:relative;overflow:hidden;padding:25px 20px;border:1px solid #42ecff73;border-radius:29px;background:radial-gradient(circle at 50% 0,#172548f4,#060812fa 69%);box-shadow:0 0 0 1px #ff46d51c,0 0 30px #2ce8ff1e,0 22px 65px #000b}

.thread-menu-card .date{color:#94a9ca;font-size:11px;font-weight:900;letter-spacing:2px}

.thread-menu-card .hero{padding:22px 16px;border:1px solid var(--neon,#45efff);border-radius:22px;background:linear-gradient(145deg,#1431499e,#130c2dbd);box-shadow:0 0 22px color-mix(in srgb,var(--neon) 28%,transparent);text-align:center}

.thread-menu-card .hero h3{margin:8px 0 4px;color:var(--neon,#45efff);font-size:34px;text-shadow:0 3px 2px #000,0 0 17px var(--neon,#45efff)}

.thread-menu-card .hero p{margin:0;color:#d2e0f5;font-size:13px}

.thread-menu-card .holiday{margin-top:18px;padding:13px;border:1px solid #ff8c3266;border-radius:16px;background:linear-gradient(100deg,#ff6b2420,#8b38ff1c);color:#ffc66e;font-size:11px;font-weight:800;text-align:center}

.thread-menu-card .note{margin-top:12px;color:#7689a9;font-size:10px;text-align:center}

.thread-menu-card .rank{display:grid;grid-template-columns:35px 1fr auto;gap:8px;padding:11px;border-bottom:1px solid #ffffff14;color:#b9c9df;font-size:13px}

.thread-menu-card .rank b:last-child{color:#66f1ff}

.thread-menu-card .rank:first-child{color:#ffe06b}
.thread-menu-card { color: #f7fbff; font-family: Inter,system-ui,sans-serif; font-size: 16px; text-align: left; }
.thread-menu-card.view { display: none; }
.thread-menu-card.view.active { display: block; animation: thread-menu-open .28s ease both; }
@keyframes thread-menu-open { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.thread-menu-card .settings{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;border-bottom:1px solid #ffffff14;text-align:left}
.thread-menu-card .settings span{display:block;font-weight:900}
.thread-menu-card .settings small{display:block;margin-top:3px;color:#8298ba;font-size:10px}
.thread-menu-card .switch{position:relative;width:57px;height:31px;border:1px solid #38eaff66;border-radius:18px;background:#11182a}
.thread-menu-card .switch:after{content:"";position:absolute;left:4px;top:4px;width:21px;height:21px;border-radius:50%;background:#68738a;transition:.2s}
.thread-menu-card .switch.on{background:linear-gradient(90deg,#26dff1,#ff4bd8);box-shadow:0 0 14px #2ce8ff44}
.thread-menu-card .switch.on:after{left:30px;background:#fff;box-shadow:0 0 8px #fff}

.thread-menu-card .guide-head{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;margin-bottom:18px}
.thread-menu-card .guide-head .back{position:absolute;left:0;top:2px}
.thread-menu-card .guide-title{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 24px;border:1px solid #ff8ae8;border-radius:999px;background:#e934b8;color:#fff;font-size:16px;font-weight:1000;letter-spacing:2px;box-shadow:0 0 18px #ff48ce77,inset 0 1px #fff7;text-align:center}
.thread-menu-card .settings { gap: 12px; }
.thread-menu-card .switch { flex: 0 0 57px; }
.thread-menu-card .option-actions { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 18px; }
.thread-menu-card .scoring-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: #76f3ff; font: 600 14px Inter,system-ui,sans-serif; cursor: pointer; }
.thread-menu-card .scoring-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.thread-menu-card .option-actions .action { margin-top: 0; }
.thread-menu-card .option-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.thread-menu-card .mix-intro { color: #b9c9df; font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.thread-menu-card .track-section-title { color: #76f3ff; font-size: 14px; letter-spacing: 2px; margin: 28px 0 12px; }
.thread-menu-card .shape-label { display: block; font-weight: 800; margin: 16px 0 8px; }
.thread-menu-card .shape-select { width: 100%; min-width: 0; min-height: 46px; padding: 9px 12px; border: 1px solid #4ae5f580; border-radius: 12px; background: #0b1429; color: #f1fbff; font: 700 15px Inter,system-ui,sans-serif; color-scheme: dark; }
.thread-menu-card .shape-step { display: grid; grid-template-columns: 38px minmax(0,1fr) 44px; align-items: center; gap: 8px; margin-top: 10px; }
.thread-menu-card .shape-step[hidden], #shape-sequence[hidden] { display: none; }
.thread-menu-card .shape-step label { color: #a6bcd9; font-size: 13px; }
.thread-menu-card .shape-remove, .thread-menu-card .shape-add { min-height: 44px; border: 1px solid #bb9aff; border-radius: 12px; background: #201a3d; color: #e6d5ff; font: 800 15px Inter,system-ui,sans-serif; cursor: pointer; }
.thread-menu-card .shape-remove { font-size: 24px; }
.thread-menu-card .shape-add { width: 100%; margin-top: 12px; }
#powerups .guide-title { max-width: calc(100% - 94px); padding: 10px 14px; font-size: clamp(12px,3.5vw,16px); letter-spacing: 1px; }
.thread-menu-card button:disabled, #generate button:disabled { opacity: .45; cursor: default; }
#generated-rules { margin: 20px 0 12px; padding: 12px; color: #c7d9ed; font-size: 13px; line-height: 1.5; border: 1px solid #4ae5f547; border-radius: 14px; }
.thread-menu-card .power-mix-row { padding: 12px 0 14px; border-bottom: 1px solid #ffffff18; }
.thread-menu-card .power-mix-row label { display: flex; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 850; }
.thread-menu-card .power-mix-row output { color: #76f3ff; font-size: 13px; }
.thread-menu-card .power-mix-row small { display: block; color: #93a8ca; margin-top: 4px; font-size: 12px; }
.thread-menu-card .power-mix-row input { display: block; width: 100%; height: 36px; margin: 6px 0 0; accent-color: #ed66d5; cursor: pointer; touch-action: pan-y; }
.thread-menu-card .power-mix-row input:focus-visible { outline: 2px solid #76f3ff; outline-offset: 3px; }
.thread-menu-card .mix-scale { display: flex; justify-content: space-between; color: #93a8ca; font-size: 11px; }
.thread-menu-card .mix-note { margin: 16px 0 4px; color: #9bb6d7; font-size: 12px; line-height: 1.5; }
.thread-menu-card .mix-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 22px 0 6px; }
.thread-menu-card .mix-reset { border: 1px solid #f6d9ff; background: var(--thread-purple-gradient); box-shadow: 0 6px 0 #62318c,0 0 18px #c36aff33; color: #100a25; font: 800 15px Inter,system-ui,sans-serif; cursor: pointer; }
.thread-menu-card .mix-actions > button { width: 100%; min-width: 0; min-height: 64px; margin: 0; padding: 12px 8px; border-radius: 15px; font-size: 14px; line-height: 1.3; letter-spacing: .5px; }
.thread-menu-card button:focus-visible { outline: 2px solid #76f3ff; outline-offset: 4px; }
.reduced-motion .thread-menu-card.view.active { animation: none; }
.reduced-motion .thread-menu-card .switch:after { transition: none; }
.reduced-motion .thread-home-link { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .thread-home-link { transition: none; }
  .thread-menu-card.view.active { animation: none; }
  .thread-menu-card .switch:after { transition: none; }
}

/* Extend the title-card palette to actions and navigation on both pages. */
#new-seed,
.track-code-form .action,
.settings-button {
  color: #100a25;
  border-color: #f6d9ff;
  background: var(--thread-purple-gradient);
  box-shadow: 0 6px 0 #62318c, 0 0 23px #c36aff44;
}
.action.secondary,
.thread-menu-card .action,
.back,
.thread-menu-card .back,
.row button,
.pill.on {
  color: #07142c;
  border-color: #d9f4ff;
  background: var(--thread-blue-gradient);
  box-shadow: 0 6px 0 #304f8f, 0 0 23px #739dff44;
}
.settings-button {
  box-shadow: 0 4px 0 #62318c, 0 0 18px #c36aff44;
}
.back,
.thread-menu-card .back,
.row button,
.pill.on {
  box-shadow: 0 3px 0 #304f8f, 0 0 14px #739dff44;
}

.track-tools { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; margin-top: 14px; }
.track-tools .action { min-width: 0; min-height: 52px; margin: 0; padding: 10px 8px; font-size: 14px; line-height: 1.3; letter-spacing: .6px; }
.track-code-form, .track-share-manual { margin-top: 20px; padding: 16px; border: 1px solid #47eeff66; border-radius: 18px; background: #081020; }
.track-code-form[hidden], .track-share-manual[hidden] { display: none; }
.track-code-form label, .track-share-manual label { display: block; margin-bottom: 8px; color: #b9c9df; font-size: 14px; font-weight: 800; }
.track-code-form input, .track-share-manual input { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid #47eeff77; border-radius: 10px; background: #030916; color: #f7fbff; font: 16px Inter,system-ui,sans-serif; user-select: text; touch-action: auto; }
.track-code-form input { text-transform: uppercase; letter-spacing: 2px; }
.track-code-form input[aria-invalid="true"] { border-color: #ff92dd; }
.track-code-form .action { margin-top: 12px; }
.track-code-form input, .track-code-form .action { display: block; box-sizing: border-box; width: 100%; margin-left: 0; margin-right: 0; }
.track-code-error { margin: 8px 0 0; color: #ffa6e5; font-size: 13px; line-height: 1.4; }
.track-status { margin: 16px 0 4px; color: #9ef6ee; font-size: 13px; line-height: 1.4; text-align: center; }
.track-code-error:empty, .track-status:empty { display: none; }
.track-tools button:disabled { opacity: .65; cursor: wait; }
.track-tools button:focus-visible, .track-code-form :focus-visible, .track-share-manual input:focus-visible { outline: 2px solid #76f3ff; outline-offset: 3px; }
.track-code-form input:focus-visible { outline-offset: -2px; }
#result .track-status { position: relative; margin: 16px 0 0; max-width: none; color: #9ef6ee; font-size: 13px; line-height: 1.4; }
.result .track-share-manual { text-align: left; }
#result .track-share-manual + .track-status { margin-top: 10px; }