/* Detective Party — shared identity. Original assets stay unchanged. */
:root {
  --brand-yellow:#fab922;
  --ink:#2b2a29;
  --paper:#fffefa;
  --page:#f5f2e9;
  --font-display:'Arial Black','Segoe UI',sans-serif;
  --shadow-sm:2px 3px 0 rgba(43,42,41,.10);
  --shadow-md:3px 4px 0 rgba(43,42,41,.12);
  --shadow-lg:5px 6px 0 rgba(43,42,41,.14)
}
html {
  color-scheme:light;
  font-size:16px;
  scroll-padding-top:150px
}
body {
  margin:0;
  background:var(--page)!important;
  color:var(--ink)!important;
  font-family:'Segoe UI',Arial,sans-serif!important;
  line-height:1.65
}
body:not(.dp-login) {
  padding:0
}
h1,h2,h3,h4,h5,h6 {
  color:var(--ink);
  line-height:1.2;
  overflow-wrap:anywhere;
  text-wrap:balance
}
h1,h2,.hero-title,.finish-title {
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.04em
}
h1 {
  font-size:clamp(1.8rem,4vw,2.8rem)
}
h2 {
  font-size:clamp(1.35rem,3vw,2rem)
}
h3 {
  font-size:1.15rem
}
p {
  color:var(--text-secondary)
}
a {
  color:#624710
}
a:hover {
  color:#302710;
  text-decoration:underline;
  text-underline-offset:4px
}
::selection {
  background:var(--brand-yellow);
  color:var(--ink)
}
:focus-visible {
  outline:3px solid var(--ink)!important;
  outline-offset:4px!important;
  box-shadow:0 0 0 6px var(--brand-yellow)!important
}
button,input,textarea,select {
  font:inherit
}
button,a.btn {
  touch-action:manipulation
}
button:not([hidden]),.btn {
  min-height:44px
}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),textarea,select {
  max-width:100%;
  background:var(--paper)!important;
  color:var(--ink)!important;
  border:2px solid #b5ab97!important;
  border-radius:7px!important;
  padding:12px 14px;
  accent-color:var(--ink)
}
input::placeholder,textarea::placeholder {
  color:#787163!important;
  opacity:1
}
input:focus,textarea:focus,select:focus {
  border-color:var(--ink)!important;
  outline:3px solid rgba(250,185,34,.45);
  outline-offset:1px
}
input[type=checkbox],input[type=radio] {
  width:19px;
  height:19px;
  accent-color:var(--ink);
  vertical-align:middle;
  flex-shrink:0
}
input[type=file] {
  max-width:100%
}
textarea {
  line-height:1.65
}
label {
  color:var(--ink);
  font-weight:650
}
.btn,button:not(.modal-close):not(.remove-btn):not(.close),a.button {
  border:2px solid var(--ink);
  border-radius:7px;
  font-weight:700;
  transition:background .15s,box-shadow .15s,transform .15s
}
.btn:hover,button:hover {
  transform:none!important
}
.btn-primary,.hero-button-primary,.btn-success,.btn-warning,button[type=submit]:not(.btn-danger):not(.btn-secondary),.btn-correct {
  background:var(--brand-yellow)!important;
  color:var(--ink)!important;
  border-color:var(--ink)!important;
  box-shadow:2px 3px 0 var(--ink)
}
.btn-primary:hover,.btn-success:hover,button[type=submit]:hover {
  background:#ffd064!important;
  box-shadow:1px 2px 0 var(--ink)
}
.btn-secondary,.btn-ghost,.hero-button-secondary,a.button {
  background:var(--paper)!important;
  color:var(--ink)!important;
  border-color:#b5ab97!important
}
.btn-secondary:hover,.btn-ghost:hover {
  background:#eee7d7!important;
  border-color:var(--ink)!important
}
.btn-danger,.btn-incorrect {
  background:#b3342a!important;
  color:#fff!important;
  border-color:#8d251e!important
}
.btn:disabled,button:disabled {
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none
}
.btn-block {
  width:100%
}
.badge-primary,.nav-link.active {
  background:var(--brand-yellow)!important;
  color:var(--ink)!important
}
.badge-success {
  background:#23623c!important;
  color:#fff!important
}
.badge-warning {
  background:#f5e3af!important;
  color:#674308!important
}
.card,.question-card,.team-card,.game-card,.game-item,.stat-card,.stat-box,.round-view-card,.block-card,.question-item,.feature-card {
  background:var(--paper)!important;
  border:1px solid var(--border-color);
  border-radius:10px!important;
  box-shadow:var(--shadow-sm)
}
.question-card,.current-question {
  border-top:4px solid var(--ink)!important
}
.card-header {
  border-bottom:1px solid var(--border-color)
}
.question-text,.case-description,.description-block {
  background:#f5f0e3!important;
  color:var(--ink)!important;
  border-left-color:var(--brand-yellow)!important;
  line-height:1.8
}
.question-text {
  font-size:clamp(1rem,2.5vw,1.2rem)
}
.question-number,.question-num,.q-number,.hint-number {
  background:var(--brand-yellow)!important;
  color:var(--ink)!important;
  border:1px solid var(--ink);
  font-weight:800
}
.answer-input,.answer-text {
  font-size:1rem!important
}
.answer-text {
  background:#f2eddf!important;
  color:var(--ink)!important
}
.hint-item,.hint-item-admin,.used-hint,.hints-section,.team-tools {
  background:#f7f2e7!important;
  color:var(--ink)
}
.hint-item.used {
  border-color:#23623c!important
}
.hint-item.locked {
  opacity:.7
}
.team-tools {
  border:1px dashed #afa28b!important;
  box-shadow:none
}
.team-tools summary {
  color:var(--ink);
  font-size:.95rem
}
.team-tools .round-view {
  padding:12px 0
}
.round-view-card summary {
  padding:4px 0;
  line-height:1.5
}
.round-view-answer {
  background:#f2eddf!important;
  border-left-color:var(--ink)!important
}
.round-view-meta {
  color:#625c50!important
}
.alert {
  border:1px solid;
  border-left-width:5px;
  border-radius:8px
}
.alert-success {
  background:#eaf4e9!important;
  color:#205833!important;
  border-color:#a6c5a4
}
.alert-danger {
  background:#fff0e9!important;
  color:#96291f!important;
  border-color:#dda89e
}
.alert-warning {
  background:#fff4cf!important;
  color:#704709!important;
  border-color:#d6b85f
}
.alert-info {
  background:#f3eddc!important;
  color:#574322!important;
  border-color:#d1bf94
}
.text-primary,.text-info {
  color:var(--ink)!important
}
.text-warning {
  color:#80500a!important
}
.stat-value,.stat-number,.total-cell {
  color:var(--ink)!important;
  font-variant-numeric:tabular-nums
}
.progress-fill,.progress>.progress-bar {
  background:var(--brand-yellow)!important;
  color:var(--ink)!important
}
.progress,.progress-bar:not(.progress>.progress-bar) {
  border-radius:3px!important
}
.timer-bar {
  top:var(--header-height)!important;
  background:var(--paper)!important;
  border-bottom:2px solid var(--ink)!important;
  box-shadow:none!important;
  gap:12px;
  padding:12px max(16px,calc((100vw - 1200px)/2))!important;
  min-height:60px
}
.timer-display {
  color:var(--ink)!important;
  font-variant-numeric:tabular-nums;
  border:1px solid #cbbf9f;
  background:#fff0be;
  padding:4px 12px;
  border-radius:6px;
  white-space:nowrap
}
.timer-danger {
  color:#b3342a!important
}
.timer-warning {
  color:#80500a!important
}
.submit-section {
  background:rgba(255,254,250,.98)!important;
  border-top:2px solid var(--ink)!important;
  padding:12px 16px!important;
  gap:12px!important
}
.main-content {
  min-width:0
}
.site-header {
  height:var(--header-height);
  background:var(--ink)!important;
  color:#fff;
  border-bottom:4px solid var(--brand-yellow)!important;
  box-shadow:none!important;
  z-index:1000
}
.header-container {
  height:calc(var(--header-height) - 4px)!important;
  gap:20px
}
.header-logo {
  gap:10px!important;
  color:#fff!important;
  text-decoration:none!important;
  flex-shrink:0
}
.header-logo img {
  width:48px;
  height:48px;
  object-fit:contain
}
.brand-name {
  font-family:var(--font-display);
  font-size:1.1rem;
  line-height:1;
  letter-spacing:-.03em
}
.brand-name small {
  display:block;
  font-family:'Segoe UI',sans-serif;
  font-size:.58rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-yellow);
  margin-top:7px
}
.header-user-info {
  min-width:0;
  gap:12px!important
}
.site-header .user-badge {
  background:#3b3933!important;
  color:#fff;
  padding:7px 10px!important;
  white-space:nowrap
}
.site-header .user-role {
  background:var(--brand-yellow)!important;
  color:var(--ink)!important
}
.site-header .nav-link {
  color:#f4ead1!important;
  padding:8px 10px;
  white-space:nowrap
}
.site-header .nav-link.active {
  color:var(--ink)!important
}
.site-header .nav-link:hover {
  background:#454136
}
.site-header .btn-ghost {
  background:transparent!important;
  border-color:#857b63!important;
  color:#fff!important
}
.site-header .nav-link-danger {
  color:#ffb4a0!important
}
.nav-menu {
  overflow-x:auto;
  min-width:0
}
.site-footer {
  background:var(--ink)!important;
  border-top:4px solid var(--brand-yellow)!important;
  color:#e6dfd0!important
}
.site-footer p,.site-footer a {
  color:#e6dfd0!important
}
.footer-container {
  max-width:1240px;
  margin:auto;
  padding:24px
}
.footer-content {
  gap:24px;
  flex-wrap:wrap
}
.creator-mark {
  display:flex;
  align-items:center;
  gap:12px
}
.creator-mark img {
  width:56px;
  height:63px;
  object-fit:contain
}
.page-header {
  margin-bottom:28px;
  padding:8px 0 20px;
  border-bottom:2px solid var(--ink)
}
.page-header h1 {
  margin-bottom:8px
}
.page-header p {
  margin:0
}
.stats-summary,.stats-grid {
  gap:16px!important
}
table,.results-table {
  background:var(--paper)!important;
  color:var(--ink);
  border:1px solid var(--border-color);
  border-collapse:collapse;
  border-radius:8px!important
}
thead,.results-table thead {
  background:#eae2ce!important
}
th {
  color:var(--ink)!important;
  font-size:.78rem;
  letter-spacing:.05em;
  line-height:1.5
}
td {
  color:#484338!important;
  line-height:1.55;
  overflow-wrap:anywhere
}
tbody tr:hover {
  background:#fff3cc!important
}
.total-cell {
  background:#fff0bd!important
}
.place-1 {
  background:var(--brand-yellow)!important;
  border:2px solid var(--ink);
  color:var(--ink)!important
}
.place-2,.place-3,.place-other {
  background:#e9e1d0!important;
  color:var(--ink)!important
}
.modal-content {
  background:var(--paper)!important;
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:12px!important;
  max-height:90dvh;
  overflow:auto
}
.modal {
  background:rgba(25,23,18,.65)!important
}
.suspect-card {
  background:var(--paper)!important
}
.suspect-card.selected,.radio-option.selected {
  border-color:var(--ink)!important;
  background:#fff0c0!important
}
.radio-option {
  background:#f7f1e4!important;
  color:var(--ink)!important
}
.suspect-photo img,.gallery-image img {
  background:#e7e0d2
}
.finish-container {
  max-width:880px;
  margin:auto
}
.finish-title {
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  background:none!important
}
.finish-score {
  color:var(--ink)!important;
  background:var(--brand-yellow)!important;
  display:inline-block;
  min-width:150px;
  padding:18px 28px;
  border:2px solid var(--ink);
  border-radius:12px;
  box-shadow:4px 5px 0 var(--ink)
}
.finish-trophy img {
  width:110px;
  height:110px;
  object-fit:contain
}
.finish-trophy {
  margin-bottom:20px!important
}
/* Existing standalone administrative forms and decoder pages. */
body.dp-legacy {
  padding:28px max(16px,calc((100vw - 1160px)/2))!important
}
body.dp-legacy>header:not(.site-header),.decoder-page>header,.decoder-page>.container>header {
  background:var(--ink)!important;
  color:#fff;
  border:0;
  border-bottom:5px solid var(--brand-yellow);
  box-shadow:none!important;
  border-radius:10px!important;
  padding:28px!important
}
.dp-legacy>header h1,.decoder-page header h1,.decoder-page header .subtitle {
  color:#fff!important;
  text-shadow:none!important
}
.dp-legacy>header nav {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.dp-legacy>header nav a {
  color:var(--brand-yellow)!important
}
.dp-legacy>form,.dp-legacy>.container>form {
  background:var(--paper);
  border:1px solid var(--border-color);
  padding:24px;
  border-radius:10px;
  max-width:1000px;
  margin:20px 0
}
.dp-login {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px 16px!important;
  min-height:100dvh;
  background:var(--ink)!important;
  background-image:url('../../photo.png')!important;
  background-size:1000px!important
}
.login-container {
  position:relative;
  width:min(100%,460px)!important;
  background:var(--paper)!important;
  border:2px solid var(--ink)!important;
  border-top:8px solid var(--brand-yellow)!important;
  border-radius:12px!important;
  padding:32px!important;
  box-shadow:8px 9px 0 rgba(250,185,34,.8)!important
}
.login-container::before {
  content:'';
  display:block;
  width:76px;
  height:76px;
  margin:0 auto 20px;
  background:url('../../_.png') center/contain no-repeat
}
.login-container h1 {
  color:var(--ink)!important;
  font-size:1.8rem!important
}
.login-container .subtitle {
  color:#625c50!important
}
.login-container button {
  width:100%;
  background:var(--brand-yellow)!important;
  color:var(--ink)!important;
  border:2px solid var(--ink)!important
}
.login-container .back-link a {
  color:#624710!important
}
.decoder-page {
  padding:24px 16px!important
}
.decoder-page .content,.decoder-page .tool-card,.decoder-page .decoder-card,.decoder-page .result,.decoder-page .result-box,.decoder-page .input-section {
  background:var(--paper)!important;
  color:var(--ink)!important;
  border-color:var(--border-color)!important;
  box-shadow:var(--shadow-sm)!important
}
.decoder-page .info-box {
  background:#fff1c9!important;
  border-left-color:var(--ink)!important
}
.decoder-page pre,.decoder-page code {
  background:#efe9dc!important;
  color:var(--ink)!important;
  white-space:pre-wrap
}
.decoder-page header {
  background:var(--ink)!important
}
.decoder-page button {
  background:var(--brand-yellow)!important;
  color:var(--ink)!important
}
.decoder-page h2,.decoder-page h3 {
  color:var(--ink)!important
}
.decoder-page .tool-icon {
  background:#fff0c0!important;
  color:var(--ink)!important
}
[style*="color:var(--accent-primary)"],[style*="color: var(--accent-primary)"] {
  color:var(--ink)!important
}
@media(max-width:1000px) {
  .site-header .user-badge {
    display:none
  }
  .header-container {
    padding:0 16px!important
  }
  .nav-menu {
    gap:3px!important
  }
  .site-header .nav-link {
    padding:8px;
    font-size:.82rem
  }
  .brand-name {
    font-size:1rem
  }
}
@media(max-width:700px) {
  :root {
    --header-height:72px
  }
  body {
    font-size:16px
  }
  .brand-name {
    font-size:.88rem
  }
  .brand-name small {
    font-size:.5rem
  }
  .header-logo img {
    width:38px;
    height:38px
  }
  .header-user-info {
    overflow:auto
  }
  .site-header .nav-menu {
    max-width:calc(100vw - 185px)
  }
  .site-header .nav-divider {
    display:none
  }
  .card,.question-card,.block-card {
    padding:20px 16px!important
  }
  .container {
    padding-left:16px;
    padding-right:16px
  }
  .question-header,.team-header {
    flex-wrap:wrap;
    gap:12px
  }
  .team-stats {
    flex-wrap:wrap;
    gap:8px!important
  }
  .timer-bar {
    font-size:.85rem;
    align-items:center;
    min-height:64px
  }
  .timer-bar>div:first-child {
    min-width:0
  }
  .timer-bar>div:first-child span {
    display:block;
    margin-left:0!important
  }
  .timer-display {
    font-size:1.15rem!important
  }
  .main-content>.container.main-content {
    padding-top:100px!important;
    padding-bottom:110px!important
  }
  .submit-section .btn {
    padding:10px 12px!important;
    font-size:.9rem!important;
    min-width:0
  }
  .suspect-card {
    grid-template-columns:1fr!important
  }
  .suspect-photo {
    width:100%!important;
    height:230px!important
  }
  .suspect-photo img {
    object-fit:contain!important
  }
  .sequence-slot {
    width:100px!important;
    height:100px!important
  }
  .sequence-slots {
    gap:12px!important
  }
  .team-tools {
    padding:12px!important
  }
  .team-tools .btn {
    padding:10px 14px!important
  }
  .round-view {
    padding:12px!important
  }
  .round-view-card {
    padding:14px!important
  }
  .round-view-card summary {
    font-size:1rem!important
  }
  .round-view-card[style],.round-view-nav {
    max-width:100%
  }
  table:not(.no-scroll),.results-table {
    display:block;
    max-width:100%;
    overflow-x:auto!important;
    overscroll-behavior-x:contain
  }
  th,td {
    padding:12px 10px!important;
    min-width:100px
  }
  .results-table .team-name {
    min-width:150px
  }
  .stats-summary,.stats-grid {
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important
  }
  .control-grid {
    grid-template-columns:1fr!important
  }
  .action-bar {
    flex-direction:column;
    align-items:stretch;
    gap:16px
  }
  .login-container {
    padding:26px 20px!important
  }
  .footer-content {
    flex-direction:column;
    align-items:flex-start
  }
  .finish-score {
    font-size:3.5rem!important
  }
  .modal-content {
    width:calc(100vw - 24px)!important;
    padding:20px 16px!important
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.action-btn.primary,.action-btn.success,.round-check-btn,.btn-check.btn-correct {
  background:var(--brand-yellow)!important;
  color:var(--ink)!important;
  border:2px solid var(--ink)!important;
  box-shadow:2px 3px 0 var(--ink)
}
.action-btn,.round-check-btn {
  min-height:44px;
  font-weight:700;
  border-radius:7px!important
}
.hero-section {
  background:none!important
}
.game-status.active,.status-active {
  background:#edf3e4!important;
  color:#235c35!important
}
.game-card.active {
  background:var(--paper)!important;
  border-color:var(--ink)!important
}
.answer-row {
  min-width:0
}
.check-buttons {
  flex-wrap:wrap
}
.decoder-page .section-header {
  border-bottom-color:var(--ink)!important
}
.dp-login .error {
  background:#fff0e9!important;
  color:#96291f!important;
  border:1px solid #dda89e
}
.dp-legacy a.button {
  padding:10px 14px
}
.dp-legacy table {
  margin-top:24px
}
.dp-legacy h1 {
  margin-top:12px
}
.footer-version {
  background:#454136!important;
  color:#efe7d3!important
}
.decoder-page .search-input {
  background:var(--paper)!important
}
.decoder-page .search-box {
  margin-bottom:24px
}
.login-container a {
  color:#624710!important
}

.legacy-brand { display:flex; align-items:center; gap:10px; width:fit-content; margin:0 0 22px; font-family:var(--font-display); font-size:1rem; color:var(--ink); text-decoration:none; }
.legacy-brand img { width:40px; height:40px; object-fit:contain; }

@media (max-width:700px) {
  .admin-search,.admin-filter-select,.search-box { min-width:0!important; width:100%; }
  .stats-row,.game-header { flex-wrap:wrap; gap:12px!important; }
}

/* Compact, consistent game management actions. */
.game-actions .game-action {
 display:inline-flex; align-items:center; justify-content:center; gap:7px;
 height:44px; min-height:44px; min-width:108px; padding:0 13px;
 border:1px solid #bdb5a6!important; border-radius:7px;
 background:var(--paper)!important; color:var(--ink)!important;
 font:600 .875rem/1 'Segoe UI',Arial,sans-serif;
 text-decoration:none!important; box-shadow:none!important; cursor:pointer;
 white-space:nowrap;
}
.game-actions .game-action:hover { background:#eee9df!important; border-color:#827663!important; }
.game-actions .game-action[aria-expanded="true"] { background:#fff1c8!important; border-color:#b99236!important; }
.game-actions .game-action--danger { color:#a7362b!important; border-color:#dec6c0!important; }
.game-actions .game-action--danger:hover { background:#fff0eb!important; border-color:#b8493e!important; }
.game-actions .game-action svg { flex:none; }
.game-header .game-title { min-width:0; overflow-wrap:anywhere; }
.game-rename-panel:not([hidden]) { margin:16px 0; padding:16px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-tertiary); }
@media(max-width:700px) {
 .game-header .game-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:6px; }
 .game-actions .game-action { min-width:0; padding:0 6px; gap:4px; font-size:.78rem; }
 .game-actions .game-action svg { width:14px; height:14px; }
}

/* Participant access: one quiet action row, with the URL collapsed by default. */
.game-invite { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border-color); }
.game-invite .invite-action { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px!important; padding:0 12px; background:transparent!important; color:var(--ink)!important; border:1px solid var(--border-color)!important; border-radius:6px; font:600 .84rem/1.2 'Segoe UI',Arial,sans-serif; box-shadow:none!important; cursor:pointer; white-space:nowrap; }
.game-invite .invite-action:hover { background:#eee8d9!important; border-color:#a79c85!important; }
.game-invite .invite-toggle { justify-content:flex-start; width:fit-content; border-color:transparent!important; padding-left:0; }
.invite-action svg { flex:none; }
.invite-chevron { display:inline-flex; transition:transform .15s; }
.invite-toggle[aria-expanded="true"] .invite-chevron { transform:rotate(180deg); }
.game-invite-panel:not([hidden]) { grid-column:1/-1; display:flex; align-items:center; gap:12px; padding:10px 0 2px; }
.game-invite-panel input { flex:1; min-width:0; font-size:.85rem!important; padding:10px!important; }
.invite-open { flex:none; font-size:.82rem; font-weight:600; }
.game-invite-status { grid-column:1/-1; font-size:.8rem; color:var(--text-secondary); }
.game-invite-status:empty { display:none; }
@media(max-width:480px) {
 .game-invite { gap:6px; }
 .game-invite .invite-action { gap:5px; padding:0 9px; font-size:.78rem; }
 .game-invite .invite-toggle { padding-left:0; }
 .invite-copy-label { display:none; }
 .game-invite .invite-action svg { width:15px; height:15px; }
 .game-invite-panel:not([hidden]) { flex-wrap:wrap; }
 .game-invite-panel input { flex-basis:100%; }
}

/* Shared game-name search: filtering never detaches cards or changes their forms. */
.game-search { margin:0 0 22px; }
.game-search-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.game-search-row input[type="search"] { flex:1; min-width:160px; max-width:520px; min-height:44px; }
.game-search-row small { font-size:.8rem; color:var(--text-secondary); white-space:nowrap; }
.game-search-empty { padding:16px; margin:12px 0 0; background:var(--bg-tertiary); border-radius:8px; color:var(--text-secondary); }
[data-game-search-title][hidden] { display:none!important; }
@media(max-width:480px) { .game-search-row input[type="search"] { min-width:0; } .game-search-row small { flex-basis:100%; } }