.section-actions,
.team-row-action {
  display: flex;
  align-items: center;
  gap: 8px;
}
.community-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.notice-button { position: relative; }
.notice-badge { margin-left: 5px; padding: 1px 5px; color: #fff; background: var(--danger); border-radius: 999px; font-size: 10px; font-weight: 800; }
.announcement-list { display: grid; gap: 10px; max-height: min(60vh, 520px); overflow-y: auto; }
.announcement-item { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fffaf0; }
.announcement-item h3 { margin: 0 0 5px; font-size: 17px; }
.announcement-item p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-item time { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }

.boss-summary { position: relative; }
.loot-summary-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.loot-summary-button {
  min-height: 40px;
  padding: 8px 16px;
  color: #fff;
  background: var(--forest);
  border-color: #344a36;
  font-weight: 800;
  box-shadow: 0 3px 0 #344a36;
}
.loot-summary-button:hover {
  color: #fff;
  background: #3f5942;
  border-color: #293c2c;
  box-shadow: 0 3px 0 #293c2c;
}
.loot-summary-button:active { box-shadow: none; transform: translateY(2px); }

@media (min-width: 1600px) {
  :root { --ad: 180px; }
  .ad-rail { padding: 10px; }
  .content { max-width: none; margin-inline: 0; }
  .timer-panel .channel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.team-row:hover {
  border-color: var(--maple);
  background: #fff6e3;
}

.team-enter {
  color: var(--maple-dark);
  font-weight: 700;
}

.boss-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.timer-panel { min-width: 0; }
.boss-list > button.timing { box-shadow: inset 4px 0 #c85b2d; }
.boss-list > .add-boss-card {
  min-height: 66px;
  color: #31533a;
  background: #f5f0df;
  border: 1px dashed #739174;
}
.boss-list > .add-boss-card:hover,
.boss-list > .add-boss-card:focus-visible { background: #e9f0df; border-color: #31533a; }
.add-boss-icon { display: grid !important; place-items: center; width: 44px; height: 44px; color: #fff; background: var(--forest); border-radius: 50%; font-size: 28px; line-height: 1; }
.custom-boss-chip { display: inline-flex !important; padding: 1px 5px; color: #fff; background: #6b7657; border-radius: 999px; font-size: 10px; vertical-align: middle; }
.boss-timer-badge {
  width: max-content;
  padding: 2px 7px;
  color: #fff;
  background: #c85b2d;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.timer-panel .filters { margin-top: 0; }
.cancel-all-timers { margin-left: auto; }
.timer-panel .channel-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  align-content: start;
  padding-right: 5px;
  scrollbar-color: #bca77e transparent;
}
.drop-panel { position: sticky; top: 80px; margin: 0; max-height: calc(100vh - 100px); overflow: auto; }
.drop-toggle { display: none; }
.drop-group + .drop-group { margin-top: 16px; }
.drop-group h3 { margin: 12px 0 8px; color: var(--maple-dark); font-size: 14px; }
.drop-group .drop-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.drop-group .drop-list li { min-width: 0; min-height: 88px; padding: 6px; }
.drop-list li.collected { border-color: var(--maple); background: #fff3d8; box-shadow: inset 0 0 0 1px #d0612b55; }
.loot-controls { grid-column: 1 / -1; display: grid; grid-template-columns: 24px minmax(20px, 1fr) 24px; align-items: center; justify-items: center; gap: 3px; width: 100%; padding: 0 3px 3px; }
.loot-controls button { width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 50%; line-height: 1; }
.loot-controls strong { font-variant-numeric: tabular-nums; }
#loot-dialog { box-sizing: border-box; width: min(520px, calc(100% - 28px)); overflow-x: hidden; }
.loot-detail-card { width: 100%; max-width: 100%; min-width: 0; }
.loot-detail-summary { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--paper); font-weight: 700; }
.loot-detail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; max-height: min(55vh, 430px); overflow-y: auto; padding: 2px; }
.loot-detail-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 58px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf0; }
.loot-detail-item img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.loot-detail-item span { min-width: 0; overflow-wrap: anywhere; }
.loot-detail-item strong { color: var(--maple-dark); white-space: nowrap; }
.loot-detail-empty { grid-column: 1 / -1; text-align: center; }
.expected-time { display: block; min-height: 18px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#team-management-dialog { box-sizing: border-box; width: min(720px, calc(100% - 28px)); overflow-x: hidden; }
.management-card { width: 100%; min-width: 0; max-height: min(86vh, 820px); overflow-y: auto; }
.management-card > *, .management-section, .management-section form { min-width: 0; }
.management-section { padding: 14px 0; border-top: 1px solid var(--line); }
.management-section h3 { margin: 0 0 10px; }
.empty-drops { margin: 18px 0 4px; padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.custom-boss-card { width: 100%; min-width: 0; }
#custom-boss-dialog { box-sizing: border-box; width: min(620px, calc(100% - 28px)); overflow-x: hidden; }
.custom-boss-list { display: grid; max-height: min(34vh, 300px); overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; }
.custom-boss-row { display: flex; align-items: center; gap: 7px; padding: 9px; border-bottom: 1px solid var(--line); }
.custom-boss-row:last-child { border-bottom: 0; }
.custom-boss-row > span { min-width: 0; margin-right: auto; overflow-wrap: anywhere; }
.custom-boss-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.custom-boss-form > label:first-of-type,
.custom-boss-form > input[type="text"],
.custom-boss-form > #custom-boss-name,
.custom-boss-form .error,
.custom-boss-actions { grid-column: 1 / -1; }
.custom-boss-actions { display: flex; gap: 8px; }
.delete-custom-boss-form { display: grid; gap: 8px; padding: 12px; border: 1px solid #c55f50; border-radius: 9px; background: #fff4ee; }
.delete-custom-boss-form[hidden] { display: none; }
.compact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.compact-form label { grid-column: 1 / -1; }
.invite-result-row { display: flex; align-items: center; gap: 8px; }
.invite-result-row .result-box { flex: 1; min-width: 0; }
.respawn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.respawn-form > :first-child,
.respawn-form > select,
.respawn-form .error,
.respawn-form button { grid-column: 1 / -1; }

@media (min-width: 981px) {
  html:has(#app-view:not([hidden])),
  body:has(#app-view:not([hidden])) { height: 100%; overflow: hidden; }
  .app-shell { height: 100dvh; min-height: 0; padding-bottom: 90px; overflow: hidden; }
  .workspace { height: calc(100dvh - 154px); min-height: 0; overflow: hidden; }
  .sidebar { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
  .boss-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
  .content { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; }
  .boss-summary { flex: 0 0 auto; }
  .boss-workspace { flex: 1; min-height: 0; align-items: stretch; overflow: hidden; }
  .timer-panel { display: flex; min-height: 0; flex-direction: column; }
  .timer-panel .channel-grid { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
  .drop-panel { position: static; height: 100%; max-height: none; overflow-y: auto; }
}

@media (max-width: 1280px) {
  .timer-panel .channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .boss-workspace { grid-template-columns: 1fr; }
  .loot-summary-box { position: static; transform: none; margin-inline: auto; }
  .drop-panel { position: static; max-height: none; overflow: visible; }
  .drop-toggle { display: inline-flex; min-height: 44px; align-items: center; }
  .drop-panel:not(.mobile-open) #drop-groups { display: none; }
  .drop-panel.mobile-open #drop-groups {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-color: #bca77e transparent;
  }
  .timer-panel .channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 68vh; }
}

@media (max-width: 760px) {
  .topbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .topbar .brand {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    margin: 0;
    flex: none;
  }
  .topbar .brand-mark.small { flex: 0 0 38px; }
  .topbar .brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .current-team,
  .topbar .connection { grid-column: 1 / -1; width: auto; order: initial; }
  .topbar > button { width: 100%; min-height: 44px; padding-inline: 8px; }
  .community-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 0; }
  .community-actions button { width: 100%; min-height: 44px; }
  .loot-summary-box { width: 100%; }
}

@media (max-width: 600px) {
  .cancel-all-timers { width: 100%; margin-left: 0; }
  .timer-panel .channel-grid { grid-template-columns: 1fr; }
  .drop-group .drop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compact-form { grid-template-columns: 1fr; }
}