.quick-entry-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 10px; background: #efeee5; margin: 12px 0; }
.quick-entry-nav button { flex: 1; min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: #62735d; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; }
.quick-entry-nav [aria-pressed="true"] { background: #fffcf5; color: #244d3d; box-shadow: 0 1px 4px #243c1812; }
.quick-entry-nav [data-entry-view="training"][aria-pressed="true"] { background: #ede7f8; color: #573b7d; }
.welcome-group-launch { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 9px 12px; margin-top: 8px; border: 1px solid #a7b8a7; border-radius: 9px; background: #edf3eb; color: #244d3d; text-align: left; font-family: 'DM Sans', sans-serif; cursor: pointer; }
.welcome-group-launch span { min-width: 0; }
.welcome-group-launch strong, .welcome-group-launch small { display: block; line-height: 1.4; }
.welcome-group-launch strong { font-size: 13px; }
.welcome-group-launch small { margin-top: 2px; font-size: 11px; }
.welcome-group-launch b { flex: none; font-size: 18px; }
.welcome-group-launch.group-training { border-color: #b8a4d3; background: #f1edf7; color: #573b7d; }
.welcome-group-launch:hover { filter: brightness(.97); }
.welcome-group-launch:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mode-facts { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; font: 600 11px 'DM Sans', sans-serif; }
.mode-facts span { padding: 5px 8px; border-radius: 6px; background: #e6efdf; color: #365b38; }
.training-mode-facts span { color: #573b7d; background: #ede7f8; }
.group-training-setup { text-align: left; color: #514360; }
.group-training-setup h3 { margin: 10px 0 6px; font: 500 23px 'Playfair Display', Georgia, serif; color: #4d356b; }
.group-training-setup > p { margin: 6px 0; font-size: 12px; line-height: 1.5; }
.training-launch-steps { display: grid; gap: 8px; padding-left: 22px; margin: 14px 0; font-size: 12px; line-height: 1.5; }
.training-launch-steps li::marker { color: #765599; font-weight: 700; }
.training-launch-actions { display: grid; gap: 8px; padding: 12px; border: 1px solid #d7cbe4; border-radius: 10px; background: #f6f2fa; }
.training-launch-actions .online-field { margin: 0; }
.training-launch-actions .confirm-button { min-height: 42px; background: #614080; font-size: 13px; white-space: normal; }
.group-training-setup .training-launch-note { margin-top: 10px; color: #6b5b79; font-size: 11px; }
.online-modal:has(#quick-training-panel:not([hidden]), #quick-group-panel:not([hidden])) > .online-description { display: none; }
.online-modal:has(#quick-group-panel:not([hidden])) .party-heading h3 { display: none; }
@media (max-width: 600px) {
  .quick-entry-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 800px) {
  .training-home .welcome-training-help { display: none; }
  .welcome-group-launch { margin-top: 6px; padding: 6px 10px; min-height: 44px; }
  .welcome-group-launch strong { font-size: 12px; }
  .welcome-group-launch small { font-size: 10px; }
}
@media (max-height: 450px) and (min-width: 451px) {
  .quick-entry-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #quick-training-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .group-training-setup .mode-facts { grid-column: 1 / -1; margin: 0; }
  .group-training-setup h3 { display: none; }
  .group-training-setup > p { font-size: 10px; margin: 0; }
  .training-launch-steps { grid-column: 1; grid-row: 3 / 5; margin: 0; gap: 4px; font-size: 10px; }
  .training-launch-actions { grid-column: 2; grid-row: 2 / 4; padding: 6px; gap: 5px; }
  .training-launch-actions .confirm-button { min-height: 32px; font-size: 11px; }
  .group-training-setup .training-launch-note { grid-column: 2; margin: 0; font-size: 9px; }
  .mode-facts { margin: 4px 0; font-size: 9px; }
  .mode-facts span { padding: 3px 6px; }
}
.quick-browse-tabs { display: flex; gap: 4px; margin: 8px 0; }
.quick-browse-tabs button { flex: 1; min-height: 36px; padding: 5px; border: 1px solid #d9dccb; border-radius: 7px; background: #fffdf7; color: #53674b; font: 500 11px 'DM Sans', sans-serif; cursor: pointer; }
.quick-browse-tabs [aria-pressed="true"] { background: #e6eddd; border-color: #9eb390; color: #284d35; }
#quick-browse-panel[data-mode="rooms"] :is(.custom-room-options, .online-divider, .join-row, #spectate-room),
#quick-browse-panel[data-mode="code"] :is(.custom-room-options, .online-lobby-tabs, .online-list-heading, #public-room-list, #public-refresh-status),
#quick-browse-panel[data-mode="create"] > :not(.quick-browse-tabs):not(.custom-room-options),
#quick-browse-panel .custom-room-options > summary { display: none; }
#quick-browse-panel .online-divider { margin-top: 8px; }
.quick-format-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quick-format-options button { display: grid; gap: 5px; min-width: 0; padding: 14px 6px; border: 1px solid #d9dccb; border-radius: 10px; color: #496244; background: #fffdf7; cursor: pointer; }
.quick-format-options strong { font: 600 17px 'DM Sans', sans-serif; }
.quick-format-options small { font: 11px 'DM Sans', sans-serif; }
.quick-format-options [aria-pressed="true"] { background: #244d3d; border-color: #244d3d; color: white; box-shadow: 0 3px 10px #244d3d18; }
.quick-format-options button:disabled { opacity: .6; cursor: wait; }
.quick-play-card .quick-play-actions { display: flex; }
.quick-play-card .quick-match-button { width: 100%; font-size: 14px; }
.quick-play-card #quick-availability { min-height: 40px; padding: 10px 12px; margin: 12px 0; border-radius: 8px; background: #ffffff85; color: #4b6545; font-size: 12px; }
.quick-steps { display: flex; counter-reset: quick-step; justify-content: space-between; padding: 0; margin: 12px 0 0; list-style: none; gap: 8px; }
.quick-steps li { flex: 1; display: flex; gap: 5px; color: #73816a; font-size: 10px; line-height: 1.4; }
.quick-steps li::before { counter-increment: quick-step; content: counter(quick-step); flex-shrink: 0; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #d8ddca; border-radius: 50%; font-size: 10px; }
.waiting-summary { display: grid; gap: 6px; margin: 10px 0 12px; padding: 12px; border: 1px solid #d4dec9; border-radius: 10px; background: #f0f4e9; text-align: left; }
.waiting-summary strong { font-size: 15px; color: #31533e; }
.waiting-summary > span { font-size: 11px; line-height: 1.45; color: #69795e; }
.waiting-summary progress { width: 100%; height: 6px; border: 0; border-radius: 6px; overflow: hidden; background: #dce4d2; accent-color: #547e4f; }
.waiting-summary progress::-webkit-progress-bar { background: #dce4d2; }
.waiting-summary progress::-webkit-progress-value { background: #547e4f; border-radius: 6px; }
.waiting-summary progress::-moz-progress-bar { background: #547e4f; }
.waiting-activities { display: flex; gap: 7px; margin: 8px 0 0; }
.waiting-activities button, #waiting-quiz-return { flex: 1; min-height: 36px; padding: 7px 10px; border: 1px solid #d8ddcb; border-radius: 7px; background: #fafbf5; color: #4f6846; font: 500 12px 'DM Sans', sans-serif; cursor: pointer; }
.waiting-activities button:disabled { opacity: .45; cursor: default; }
#waiting-quiz-return { width: 100%; margin: 0 0 10px; background: #e9f1e2; font-size: 12px; }
.training-modal:has(#waiting-quiz-return:not([hidden])) .modal-symbol { display: none; }
.online-modal :is(.quick-entry-nav button, .quick-format-options button, .waiting-activities button):focus-visible { outline: 2px solid #a2823b; outline-offset: 2px; }
@media (max-width: 400px) {
  .quick-format-options { gap: 5px; }
  .quick-format-options strong { font-size: 14px; }
  .quick-format-options small { font-size: 9px; }
  .quick-format-options button { padding: 11px 3px; }
  .quick-play-card .quick-match-button { font-size: 13px; }
  .waiting-summary strong { font-size: 13px; }
  .waiting-activities button { padding: 7px 4px; font-size: 11px; }
}
@media (min-height: 451px) and (max-height: 700px) {
  .training-modal:has(#waiting-quiz-return:not([hidden])) { padding: 14px; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) .section-label { display: none; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) h2 { font-size: 23px; margin: 4px 0 8px; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) #training-question { margin: 8px 0; font-size: 14px; line-height: 1.4; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) #training-feedback { min-height: 0; margin: 8px 0; font-size: 12px; line-height: 1.4; }
  .online-modal { padding: 14px; }
  .online-modal .online-description { display: none; }
  .quick-entry-nav { margin: 6px 0; }
  .quick-format-options button { padding: 9px 3px; }
  .quick-play-card { margin: 8px 0; padding: 10px; }
  .quick-play-card > div > strong { font-size: 19px; }
  .quick-play-card #quick-availability { min-height: 0; padding: 8px; margin: 8px 0; }
  .quick-play-card .online-entry-fee-row { font-size: 11px; }
  .quick-steps { display: none; }
  .online-modal .room-status { margin: 6px 0; font-size: 11px; }
  .online-modal:has(.waiting-summary:not([hidden])) .room-status { display: none; }
  .online-modal .room-code-row small { display: none; }
  .waiting-summary { margin: 6px 0; padding: 8px; gap: 4px; }
  .waiting-summary > span { display: none; }
  .online-modal .room-player-list { gap: 4px; }
  .online-modal .room-player { min-height: 29px; padding: 5px 7px; font-size: 11px; }
  .online-modal .room-ready-progress { margin: 5px 0; font-size: 11px; }
  .online-modal .room-footnote { margin: 5px 0 0; font-size: 10px; }
  .room-ready-button, .leave-waiting-button { min-height: 36px; padding: 7px; }
}
@media (max-height: 450px) and (min-width: 451px) {
  .online-modal { width: min(820px, calc(100vw - 24px)); padding: 10px 14px; }
  .online-modal > .online-description { display: none; }
  #online-entry { display: grid; grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr); gap: 5px 10px; }
  #online-entry > .quick-entry-nav { grid-column: 1 / -1; margin: 0; }
  #online-entry > .quick-format-options { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: 5px; }
  .quick-format-options button { padding: 6px; gap: 2px; }
  .quick-format-options strong { font-size: 12px; }
  .quick-format-options small { font-size: 9px; }
  #online-name-field, #return-to-online-room { grid-column: 1 / -1; margin: 0; }
  #online-name-field { flex-direction: row; align-items: center; gap: 8px; font-size: 10px; }
  #online-name-field input { flex: 1; width: auto; height: 30px; }
  #quick-browse-panel .online-lobby-tabs, #quick-browse-panel .online-divider, #quick-browse-panel .online-list-heading small { display: none; }
  #quick-browse-panel .online-lobby-panel { min-height: 0; }
  #quick-browse-panel .quick-browse-tabs { margin: 0 0 5px; }
  #quick-browse-panel .quick-browse-tabs button { min-height: 30px; font-size: 10px; }
  #quick-browse-panel .public-room-list { max-height: 120px; scrollbar-width: none; }
  #quick-browse-panel .public-room-list::-webkit-scrollbar { display: none; }
  #quick-search-panel, #quick-browse-panel { grid-column: 2; grid-row: 3; }
  #online-entry:has(.quick-format-options[hidden]) #quick-browse-panel { grid-column: 1 / -1; grid-row: auto; }
  .quick-play-card { margin: 0; padding: 8px; }
  .quick-play-card > div > strong, #quick-format-description, .quick-steps { display: none; }
  .quick-play-card #quick-availability { min-height: 0; font-size: 10px; margin: 0 0 6px; padding: 6px; }
  .quick-play-card .online-entry-fee-row { margin-top: 6px; font-size: 10px; line-height: 1.3; }
  .quick-play-card .quick-match-button { min-height: 32px; padding: 7px; font-size: 12px; }
  #online-room-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; }
  #online-room-view > .room-code-row { grid-column: 1; grid-row: 1; margin: 0; }
  #online-room-view > .room-status { grid-column: 1; grid-row: 2; margin: 0; }
  #online-room-view > .waiting-summary { grid-column: 1; grid-row: 3; margin: 0; padding: 7px; gap: 3px; }
  .waiting-summary strong { font-size: 12px; }
  .waiting-summary > span { font-size: 10px; }
  #online-room-view > .room-player-list { grid-column: 2; grid-row: 1 / 4; display: flex; flex-direction: column; gap: 3px; margin: 0; }
  .online-modal .room-player { display: flex; min-height: 23px; padding: 4px 6px; }
  .online-modal .room-seat { font-size: 8px; }
  #online-room-view > #room-ready-progress { grid-column: 2; grid-row: 4; margin: 0; font-size: 10px; }
  #online-room-view > .waiting-activities { grid-column: 1; grid-row: 4; margin: 0; gap: 4px; }
  .waiting-activities button { min-height: 26px; padding: 3px; font-size: 9px; }
  #online-room-view > #ready-room, #online-room-view > #start-room { grid-column: 2; grid-row: 5; min-height: 30px; margin: 0; padding: 4px; font-size: 10px; }
  #online-room-view > #leave-waiting-room { grid-column: 1; grid-row: 5; min-height: 30px; padding: 4px; font-size: 10px; }
  #online-room-view > .room-footnote { margin: 0; font-size: 9px; line-height: 1.2; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 6px 12px; padding: 18px 48px 12px 12px; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) :is(.section-label, h2) { display: none; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) #training-progress { grid-column: 1; grid-row: 1; margin: 0; font-size: 10px; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) #training-question { grid-column: 1; grid-row: 2; margin: 0; font-size: 12px; line-height: 1.35; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) #waiting-quiz-return { grid-column: 1; grid-row: 3; margin: 0; min-height: 30px; padding: 4px; font-size: 10px; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) #training-answers { grid-column: 2; grid-row: 1 / 4; gap: 5px; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) .training-answer { padding: 7px; font-size: 10px; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) #training-feedback { grid-column: 1 / -1; grid-row: 4; min-height: 0; margin: 0; font-size: 11px; line-height: 1.35; }
  .training-modal:has(#waiting-quiz-return:not([hidden])) #training-next { grid-column: 2; grid-row: 5; min-height: 30px; margin: 0; padding: 5px; font-size: 11px; }
}