/*
 * CAISSA Classic - Season 4.3B pixel-perfect retro pass
 * Visual-only module inspired by late-90s/early-2000s internet chess lobbies.
 * Scoped with yc- classes so it does not affect production pages.
 */

#yahooClassicSection {
    --yc-classic-beige: #d6cfad;
    --yc-classic-beige-light: #fff5cf;
    --yc-classic-olive: #767d56;
    --yc-classic-gray: #c0c0c0;
    --yc-classic-gray-dark: #808080;
    --yc-classic-blue: #003399;
    --yc-classic-purple: #5c3f8f;
    --yc-classic-red: #ba1010;
    --yc-status-orange: #d78018;
    --yc-panel-white: #fffdf0;
    --yc-border-gray: #606060;
    --yc-black: #101010;
    --yc-font-classic: Tahoma, Arial, "MS Sans Serif", Verdana, sans-serif;
    background: var(--yc-classic-olive);
}

#yahooClassicSection.active {
    display: flex;
    height: 100dvh;
    min-height: 100dvh;
}

#yahooClassicSection * {
    box-sizing: border-box;
}

#yahooClassicSection {
    cursor: default;
}

#yahooClassicSection *::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

#yahooClassicSection *::-webkit-scrollbar-track {
    background: var(--yc-classic-gray);
    border: 1px solid var(--yc-classic-gray-dark);
}

#yahooClassicSection *::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border: 2px solid;
    border-color: #ffffff #707070 #707070 #ffffff;
}

#yahooClassicSection *::-webkit-scrollbar-corner {
    background: var(--yc-classic-gray);
}

body.yc-classic-active .content-area {
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
}

body.yc-classic-active,
body.yc-classic-active #app {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

#yahooClassicSection {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

.yc-page {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    scrollbar-color: #d8d8d8 var(--yc-classic-gray);
    background:
        linear-gradient(90deg, rgba(45, 52, 28, 0.16) 1px, transparent 1px),
        linear-gradient(180deg, rgba(45, 52, 28, 0.16) 1px, transparent 1px),
        var(--yc-classic-olive);
    background-size: 16px 16px;
    color: var(--yc-black);
    font-family: var(--yc-font-classic);
    font-size: 12px;
}

.yc-shell {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    border: 2px solid;
    border-width: 2px 2px 0;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: var(--yc-classic-beige);
    outline: 1px solid #2f2f2f;
}

.yc-shell.yc-table-open {
    grid-template-rows: auto minmax(0, 1fr) minmax(120px, 20vh) auto;
}

.yc-header {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(420px, auto);
    gap: 8px;
    align-items: end;
    padding: 5px 7px;
    border: 2px solid;
    border-color: #f8e9b0 #654f16 #654f16 #fff8dc;
    background:
        linear-gradient(180deg, #fff6b9 0%, #efd074 48%, #c9982c 49%, #f2df9a 100%);
}

.yc-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #332500;
}

.yc-brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 2px solid;
    border-color: #ffffff #806500 #806500 #fff8dc;
    background: #fff6c7;
    color: var(--yc-classic-red);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 1;
}

.yc-brand h2 {
    margin: 0;
    font-family: Arial, Tahoma, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 1px 1px 0 #fff4a8, 2px 2px 0 #4d2600;
}

.yc-brand-caissa {
    color: var(--yc-classic-red);
    font-size: 34px;
    font-weight: 900;
}

.yc-brand-rest {
    color: #2c205a;
    font-size: 20px;
    font-weight: 700;
}

.yc-brand p {
    margin: 2px 0 0;
    color: #332500;
    font-size: 11px;
    font-weight: 700;
}

.yc-room-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-end;
    align-items: center;
    max-width: 620px;
}

.yc-era-note {
    width: 100%;
    color: #311d00;
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

.yc-era-note strong {
    color: #241d54;
}

.yc-tab,
.yc-classic-button,
.yc-send-button,
.yc-row-action {
    min-height: 23px;
    border: 2px solid;
    border-color: #ffffff #707070 #707070 #ffffff;
    background: var(--yc-classic-gray);
    color: var(--yc-black);
    cursor: default;
    font-family: var(--yc-font-classic);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}

.yc-tab {
    min-height: 21px;
    padding: 1px 6px;
    font-size: 10px;
}

.yc-tab span {
    display: inline-block;
    min-width: 12px;
    text-align: center;
}

.yc-tab.active {
    background: var(--yc-classic-blue);
    color: #ffffff;
    border-color: #8eb4ff #001a66 #001a66 #d5e3ff;
}

.yc-tab:hover,
.yc-classic-button:hover:not(:disabled),
.yc-send-button:hover:not(:disabled) {
    background: #d9d9d9;
    color: #000000;
}

.yc-tab:active,
.yc-classic-button:active:not(:disabled),
.yc-send-button:active:not(:disabled),
.yc-row-action:active:not(:disabled) {
    border-color: #707070 #ffffff #ffffff #707070;
    padding-top: 3px;
    padding-left: 10px;
}

.yc-tab:focus-visible,
.yc-classic-button:focus-visible,
.yc-send-button:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: -4px;
}

.yc-workspace {
    display: grid;
    grid-template-columns: 168px minmax(620px, 1fr) clamp(224px, 18vw, 310px);
    gap: 6px;
    padding: 6px;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

.yc-sidebar,
.yc-player-panel,
.yc-table-panel,
.yc-chat-panel {
    min-width: 0;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #cfc7a7;
}

.yc-sidebar {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 6px;
    overflow-y: auto;
}

.yc-panel {
    border: 2px solid;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: var(--yc-classic-beige);
    padding: 5px;
}

.yc-panel-title,
.yc-panel-heading {
    color: #241d54;
    font-size: 11px;
    font-weight: 700;
}

.yc-panel-title {
    margin-bottom: 5px;
    padding: 3px 4px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #eee3bd;
}

.yc-actions-panel {
    display: grid;
    gap: 4px;
}

.yc-login-panel {
    display: grid;
    gap: 4px;
}

.yc-classic-account-fields {
    display: grid;
    gap: 4px;
    padding: 4px;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #d8ceb0;
}

.yc-classic-account-fields[hidden] {
    display: none;
}

.yc-classic-login-status {
    min-height: 24px;
    padding: 3px 4px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #efe4bd;
    color: #2b2b2b;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 700;
}

.yc-classic-login-status[data-state="error"] {
    color: #8a0000;
    font-weight: 700;
}

.yc-create-table-panel {
    display: grid;
    gap: 5px;
}

.yc-create-table-panel[data-expanded="false"] {
    display: none;
}

.yc-create-table-panel.disabled {
    color: #666666;
}

.yc-create-table-panel label {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
}

.yc-classic-field {
    width: 100%;
    min-height: 21px;
    padding: 2px 4px;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: var(--yc-panel-white);
    color: #202020;
    font-family: "Tahoma", "Arial", sans-serif;
    font-size: 11px;
}

.yc-classic-field:disabled {
    background: #d5ccb1;
    color: #777777;
}

.yc-create-table-panel small {
    min-height: 22px;
    padding: 3px 4px;
    border: 1px solid #b9b096;
    background: #f5edcc;
    color: #202020;
    font-size: 10px;
    line-height: 1.25;
}

.yc-create-table-panel small[data-offline="true"] {
    color: #7a1d1d;
}

.yc-classic-button {
    width: 100%;
    padding: 3px 7px;
    text-align: left;
}

.yc-classic-button:disabled,
.yc-row-action:disabled {
    border-color: #ffffff #8d8d8d #8d8d8d #ffffff;
    background: #b9b9b9;
    color: #666666;
    text-shadow: 1px 1px 0 #ffffff;
}

.yc-classic-button.primary {
    background: #f2d15f;
}

.yc-classic-button.active,
.yc-sound-toggle[aria-pressed="true"] {
    border-color: #707070 #ffffff #ffffff #707070;
    background: #fff3a8;
    color: #000000;
    padding-top: 4px;
    padding-left: 8px;
}

.yc-options-control {
    display: grid;
    gap: 3px;
    padding: 5px;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #ded6b9;
}

.yc-options-control label {
    color: #241d54;
    font-size: 10px;
    font-weight: 700;
}

.yc-board-style-select {
    width: 100%;
    min-height: 22px;
    padding: 2px 4px;
    font-size: 11px;
}

.yc-table-options-control {
    padding: 4px;
    background: #d5ccb0;
}

.yc-status-card {
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--yc-border-gray);
    background: #f0e7c7;
    color: #2c2c2c;
    font-size: 10px;
    line-height: 1.3;
}

.yc-status-card strong {
    color: #241d54;
}

.yc-game-info-panel {
    display: grid;
    gap: 4px;
}

.yc-game-info-grid {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: var(--yc-panel-white);
    font-size: 10px;
}

.yc-game-info-grid dt,
.yc-game-info-grid dd {
    min-width: 0;
    margin: 0;
    padding: 3px 4px;
    border-right: 1px solid #b9b096;
    border-bottom: 1px solid #b9b096;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-game-info-grid dt {
    color: #241d54;
    font-weight: 700;
}

.yc-room-directory {
    display: grid;
    gap: 3px;
    font-size: 10px;
    line-height: 1.25;
}

.yc-room-directory span {
    display: block;
    padding: 3px 4px 4px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #f0e7c7;
}

.yc-room-directory strong {
    display: block;
    color: #241d54;
    font-size: 10px;
}

.yc-rating-legend {
    display: grid;
    gap: 4px;
    align-self: end;
    font-size: 10px;
}

.yc-rating-legend span {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 5px;
    align-items: center;
}

.yc-rating-box {
    width: 12px;
    height: 12px;
    border: 1px solid;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: #c0c0c0;
}

.yc-rating-box.master {
    background: #000000;
}

.yc-rating-box.elite {
    background: #b30000;
}

.yc-rating-box.expert {
    background: #f28c00;
}

.yc-rating-box.club {
    background: #7b35b4;
}

.yc-rating-box.casual {
    background: #1f59c9;
}

.yc-rating-box.new {
    background: #238a40;
}

.yc-rating-box.provisional {
    background: #8a5a2b;
}

.yc-activity-panel {
    min-height: 120px;
}

.yc-activity-feed {
    max-height: 150px;
    overflow-y: auto;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: var(--yc-panel-white);
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
}

.yc-activity-line {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 4px;
    min-height: 20px;
    padding: 3px 5px;
    border-bottom: 1px solid #b9b096;
}

.yc-activity-line:nth-child(odd) {
    background: #f1e7c4;
}

.yc-activity-line span {
    color: #241d54;
    font-weight: 700;
}

.yc-activity-line strong {
    min-width: 0;
    overflow: hidden;
    color: #202020;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-activity-line.connect strong {
    color: #006b2f;
}

.yc-activity-line.disconnect strong,
.yc-activity-line.error strong {
    color: #7a1d1d;
}

.yc-activity-line.watch strong,
.yc-activity-line.room strong {
    color: var(--yc-classic-blue);
}

.yc-activity-line.challenge strong {
    color: #7b3f00;
}

.yc-activity-line.capture strong,
.yc-activity-line.gameover strong {
    color: #8a1f1f;
}

.yc-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    padding: 4px 6px;
    border-bottom: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #e1d6b5;
}

.yc-panel-heading h3 {
    margin: 0;
    font-size: 12px;
}

.yc-panel-heading span {
    color: #3a3425;
    font-size: 10px;
    font-weight: 700;
}

.yc-table-grid,
.yc-player-list {
    display: grid;
    background: var(--yc-panel-white);
    color: var(--yc-black);
    font-size: 11px;
    min-height: 0;
}

.yc-table-panel,
.yc-player-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.yc-table-grid {
    height: 100%;
    max-height: none;
    overflow: auto;
}

.yc-tournament-hero,
.yc-tournament-panel {
    margin: 6px;
    border: 2px solid;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: #f1e7c4;
    color: #202020;
}

.yc-tournament-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 8px;
    background: linear-gradient(180deg, #fff1b4, #d8c38a);
}

.yc-tournament-hero h4,
.yc-tournament-panel h4 {
    margin: 0;
    color: #241d54;
    font-size: 12px;
}

.yc-tournament-hero p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}

.yc-tournament-badge {
    justify-self: end;
    align-self: start;
    padding: 2px 6px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #eee3bd;
    color: #7a1d1d;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.yc-tournament-panel {
    display: grid;
    gap: 6px;
    padding: 7px;
}

.yc-tournament-list {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    margin: 0;
    border: 1px solid #b9b096;
    background: var(--yc-panel-white);
}

.yc-tournament-list dt,
.yc-tournament-list dd {
    margin: 0;
    padding: 4px 6px;
    border-bottom: 1px solid #d0c6a8;
    font-size: 11px;
}

.yc-tournament-list dt {
    border-right: 1px solid #b9b096;
    background: #eee3bd;
    color: #241d54;
    font-weight: 700;
}

.yc-tournament-empty {
    margin: 0;
    padding: 5px 6px;
    border: 1px solid #b9b096;
    background: #fff8dc;
    color: #484848;
    font-size: 11px;
    line-height: 1.35;
}

.yc-computer-hero,
.yc-computer-panel {
    margin: 6px;
    border: 2px solid;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: #e8dfbd;
    color: #202020;
}

.yc-computer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 8px;
    background:
        linear-gradient(90deg, rgba(36, 29, 84, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, #e7eefc, #c6d4ee);
    background-size: 8px 8px, auto;
}

.yc-computer-hero h4,
.yc-computer-panel h4 {
    margin: 0;
    color: #241d54;
    font-size: 12px;
}

.yc-computer-hero p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}

.yc-computer-badge {
    justify-self: end;
    align-self: start;
    padding: 2px 6px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #eee3bd;
    color: #241d54;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.yc-computer-panel {
    display: grid;
    gap: 6px;
    padding: 7px;
}

.yc-computer-list {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    margin: 0;
    border: 1px solid #b9b096;
    background: var(--yc-panel-white);
}

.yc-computer-list dt,
.yc-computer-list dd {
    margin: 0;
    padding: 4px 6px;
    border-bottom: 1px solid #d0c6a8;
    font-size: 11px;
}

.yc-computer-list dt {
    border-right: 1px solid #b9b096;
    background: #dde7fb;
    color: #241d54;
    font-weight: 700;
}

.yc-computer-empty {
    margin: 0;
    padding: 5px 6px;
    border: 1px solid #b9b096;
    background: #f7f4e6;
    color: #484848;
    font-size: 11px;
    line-height: 1.35;
}

.yc-teaching-hero,
.yc-teaching-panel {
    margin: 6px;
    border: 2px solid;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: #eee6c8;
    color: #202020;
}

.yc-teaching-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 8px;
    background:
        linear-gradient(90deg, rgba(0, 96, 56, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, #e9f4d5, #c8dba5);
    background-size: 8px 8px, auto;
}

.yc-teaching-hero h4,
.yc-teaching-panel h4 {
    margin: 0;
    color: #214d2e;
    font-size: 12px;
}

.yc-teaching-hero p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}

.yc-teaching-badge {
    justify-self: end;
    align-self: start;
    padding: 2px 6px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #eee3bd;
    color: #214d2e;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.yc-teaching-panel {
    display: grid;
    gap: 6px;
    padding: 7px;
}

.yc-teaching-list {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    margin: 0;
    border: 1px solid #b9b096;
    background: var(--yc-panel-white);
}

.yc-teaching-list dt,
.yc-teaching-list dd {
    margin: 0;
    padding: 4px 6px;
    border-bottom: 1px solid #d0c6a8;
    font-size: 11px;
}

.yc-teaching-list dt {
    border-right: 1px solid #b9b096;
    background: #e3edce;
    color: #214d2e;
    font-weight: 700;
}

.yc-teaching-empty {
    margin: 0;
    padding: 5px 6px;
    border: 1px solid #b9b096;
    background: #fbf6df;
    color: #484848;
    font-size: 11px;
    line-height: 1.35;
}

.yc-player-list {
    height: 100%;
    max-height: none;
    overflow: auto;
}

.yc-table-row {
    display: grid;
    grid-template-columns: 46px 62px minmax(92px, 0.68fr) minmax(92px, 0.68fr) minmax(150px, 0.9fr) minmax(238px, 1.75fr);
    min-height: 22px;
}

.yc-player-row {
    display: grid;
    grid-template-columns: 42px minmax(96px, 1fr) 58px 36px;
    min-height: 22px;
}

.yc-table-row > span,
.yc-player-row > span {
    min-width: 0;
    padding: 3px 5px;
    border-right: 1px solid #b9b096;
    border-bottom: 1px solid #b9b096;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-table-head,
.yc-player-head {
    background: var(--yc-classic-blue);
    color: #ffffff;
    font-weight: 700;
}

.yc-table-head > span,
.yc-player-head > span {
    border-right-color: #7fa1de;
    border-bottom-color: #001f73;
}

.yc-table-row:not(.yc-table-head):nth-child(odd),
.yc-player-row:not(.yc-player-head):nth-child(odd) {
    background: #f1e7c4;
}

.yc-table-row:not(.yc-table-head):nth-child(even),
.yc-player-row:not(.yc-player-head):nth-child(even) {
    background: var(--yc-panel-white);
}

.yc-table-row.waiting {
    background: #fff3a8;
}

.yc-table-row:hover:not(.yc-table-head),
.yc-player-row:hover:not(.yc-player-head) {
    background: #dbe8ff;
}

.yc-row-empty > span {
    grid-column: 1 / -1;
    color: #484848;
    font-style: italic;
}

.yc-row-action {
    width: 100%;
    min-height: 18px;
    padding: 1px 4px;
    font-size: 10px;
    text-align: center;
}

.yc-row-action:hover:not(:disabled) {
    background: #d9d9d9;
}

.yc-row-action:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: -3px;
}

.yc-table-chip,
.yc-player-badge {
    display: inline-block;
    max-width: 100%;
    padding: 1px 4px;
    border: 1px solid;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: #e8dfbd;
    color: #241d54;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.1;
    vertical-align: middle;
}

.yc-options-cell,
.yc-watch-action-cell,
.yc-watchers-cell {
    display: flex;
    gap: 4px;
    align-items: center;
}

.yc-watch-action-cell {
    justify-content: center;
}

.yc-options-cell {
    flex-wrap: wrap;
}

.yc-watchers-cell {
    justify-content: space-between;
}

.yc-watcher-count {
    min-width: 0;
    flex: 1 1 auto;
}

.yc-player-color-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.yc-table-chip.rated {
    background: #dbe8ff;
}

.yc-table-chip.casual {
    background: #f0e7c7;
}

.yc-table-chip.blitz {
    background: #fff3a8;
}

.yc-table-chip.rapid {
    background: #dff0c8;
}

.yc-table-chip.observed {
    background: #e0d6ff;
}

.yc-table-chip.private {
    background: #ead5d5;
}

.yc-browser-status span:first-child::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 4px;
    border: 1px solid #404040;
    background: #00a651;
}

.yc-player-badge {
    margin-left: 4px;
    color: #3a3425;
}

.yc-player-badge.computer {
    color: #5c3f8f;
}

.yc-player-badge.observing {
    color: var(--yc-classic-blue);
}

.yc-pixel-led {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 4px;
    border: 1px solid #404040;
    vertical-align: -1px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45);
}

.yc-pixel-led.online {
    background: #00a651;
}

.yc-pixel-led.away {
    background: #f2d15f;
}

.yc-pixel-led.guest {
    background: #4e79c8;
}

.yc-pixel-led.rating-master {
    background: #000000;
}

.yc-pixel-led.rating-elite {
    background: #b30000;
}

.yc-pixel-led.rating-expert {
    background: #f28c00;
}

.yc-pixel-led.rating-club {
    background: #7b35b4;
}

.yc-pixel-led.rating-casual {
    background: #1f59c9;
}

.yc-pixel-led.rating-new {
    background: #238a40;
}

.yc-pixel-led.rating-provisional {
    background: #8a5a2b;
}

.yc-chat-panel {
    margin: 0 6px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
}

.yc-chat-status {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px;
    border-bottom: 2px solid;
    border-color: #f9c67b #6d3b00 #6d3b00 #ffe0a6;
    background: var(--yc-status-orange);
    color: #fff8dc;
    font-size: 11px;
    font-weight: 700;
}

.yc-chat-body {
    height: auto;
    min-height: 0;
    overflow-y: auto;
    padding: 5px 7px;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: var(--yc-panel-white);
    color: var(--yc-black);
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 1.45;
}

.yc-chat-body p {
    margin: 0 0 5px;
}

.yc-say-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 56px;
    gap: 5px;
    align-items: center;
    padding: 5px 6px;
    border-top: 1px solid var(--yc-border-gray);
    background: var(--yc-classic-beige);
    font-size: 11px;
    font-weight: 700;
}

.yc-say-row input {
    min-width: 0;
    height: 23px;
    padding: 3px 5px;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #f5f0dc;
    color: #4b4b4b;
    font-family: var(--yc-font-classic);
    font-size: 11px;
}

.yc-say-row input:disabled,
.yc-send-button:disabled {
    opacity: 1;
    cursor: not-allowed;
}

.yc-say-row input:disabled {
    background: #e8e5d8;
    color: #666666;
    font-style: italic;
}

.yc-send-button {
    width: 56px;
    padding: 2px 6px;
}

.yc-send-button:disabled {
    color: #707070;
    cursor: default;
    text-shadow: 1px 1px 0 #ffffff;
}

.yc-browser-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 110px 110px 110px 100px;
    gap: 3px;
    padding: 3px 5px;
    border-top: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: var(--yc-classic-gray);
    color: #202020;
    font-size: 10px;
}

.yc-browser-status span {
    min-width: 0;
    padding: 2px 5px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-game-window {
    display: none;
    grid-template-columns: 168px minmax(460px, 1fr) clamp(286px, 23vw, 392px);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
    border-top: 1px solid var(--yc-border-gray);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.25) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
        #bcb391;
    background-size: 12px 12px;
    min-height: 0;
    overflow: hidden;
}

.yc-game-table-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 92px 96px 88px 92px minmax(0, 1fr) 118px;
    gap: 4px;
    align-items: center;
    padding: 3px 5px;
    border: 2px solid;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: linear-gradient(180deg, #efe4bd, #d2c5a2);
    color: #201800;
    font-size: 10px;
    font-weight: 700;
}

.yc-game-table-header span,
.yc-game-table-header strong {
    min-width: 0;
    padding: 2px 4px 3px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: var(--yc-panel-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-game-table-header span::before,
.yc-game-table-header strong::before {
    content: attr(data-label) ": ";
    color: #5d542f;
    font-weight: 700;
}

.yc-shell.yc-table-open .yc-workspace {
    display: none;
}

.yc-shell.yc-table-open .yc-game-window {
    display: grid;
}

.yc-game-controls,
.yc-game-board-panel,
.yc-move-panel {
    min-width: 0;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #c9c0a0;
}

.yc-game-controls {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 5px;
    overflow-y: auto;
}

.yc-table-game-options {
    gap: 5px;
}

.yc-options-heading {
    color: #241d54;
    font-size: 10px;
    font-weight: 700;
}

.yc-check-control,
.yc-time-control {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    color: #202020;
    font-size: 10px;
    font-weight: 700;
}

.yc-time-control {
    grid-template-columns: minmax(0, 1fr) 72px;
}

.yc-check-control input {
    width: 13px;
    height: 13px;
    margin: 0;
}

.yc-game-controls .yc-classic-button {
    min-height: 20px;
    padding: 2px 5px;
    font-size: 11px;
}

.yc-game-controls .yc-classic-button:disabled {
    color: #6f6f6f;
    text-shadow: 1px 1px 0 #ffffff;
    background: #b9b9b9;
    cursor: default;
}

.yc-game-window[data-mode="joining"] .yc-game-table-header {
    background: #f2d15f;
}

.yc-game-window[data-mode="watching"] .yc-game-table-header {
    background: #dbe8ff;
}

.yc-game-system-panel {
    display: grid;
    gap: 4px;
}

.yc-game-system-log {
    min-height: 72px;
    max-height: 116px;
    overflow-y: auto;
    padding: 5px 6px;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: var(--yc-panel-white);
    color: #202020;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    line-height: 1.3;
}

.yc-game-system-log p {
    margin: 0 0 3px;
}

.yc-game-board-panel {
    display: grid;
    grid-template-rows: minmax(180px, 1fr) auto;
    grid-auto-rows: auto;
    gap: 6px;
    justify-items: center;
    align-content: stretch;
    padding: 6px;
    min-height: 0;
    overflow: hidden;
}

.yc-game-player {
    width: 100%;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 124px 70px 88px;
    align-items: center;
    gap: 4px;
    min-height: 27px;
    padding: 4px 7px;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: linear-gradient(180deg, #f8efcf, #d9cca6);
    color: var(--yc-black);
    font-size: 11px;
    font-weight: 700;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.yc-game-player.black {
    background: linear-gradient(180deg, #d2c7a1, #b9ad87);
}

.yc-game-player.white {
    background: linear-gradient(180deg, #fff6d2, #e8d9aa);
}

.yc-game-player.turn-active {
    background: linear-gradient(180deg, #fff8bb, #ebd36a);
    color: #101010;
    border-color: #ffffff #8a6b00 #8a6b00 #ffffff;
}

.yc-game-player.local-player {
    outline: 2px solid #0046b8;
    outline-offset: -3px;
}

.yc-local-player-badge {
    display: inline-block;
    margin-left: 7px;
    padding: 0 4px;
    border: 1px solid #0b3f95;
    background: #e9f1ff;
    color: #003887;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    vertical-align: 1px;
}

.yc-turn-led {
    width: 10px;
    height: 10px;
    border: 1px solid #404040;
    background: #ffffff;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.45);
}

.yc-game-player.black .yc-turn-led {
    background: #050505;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
}

.yc-game-player.white .yc-turn-led {
    background: #ffffff;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9);
}

.yc-game-player.turn-active .yc-turn-led {
    outline: 2px solid #00a651;
    outline-offset: 1px;
}

.yc-game-player .yc-player-rating::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    border: 1px solid #202020;
    background: #ffffff;
    vertical-align: -5px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.yc-game-player.black .yc-player-rating::before {
    background: #050505;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18);
}

.yc-game-player.white .yc-player-rating::before {
    background: #ffffff;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9);
}

.yc-player-name,
.yc-player-rating,
.yc-player-state {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-player-state {
    justify-self: center;
    padding: 1px 4px;
    border: 1px solid;
    border-color: #ffffff var(--yc-border-gray) var(--yc-border-gray) #ffffff;
    background: #e8dfbd;
    color: #241d54;
    font-size: 10px;
}

.yc-game-player.turn-active .yc-player-state {
    background: #00a651;
    color: #ffffff;
}

.yc-player-clock {
    justify-self: end;
    min-width: 82px;
    padding: 3px 6px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #101010;
    color: #00ff66;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    line-height: 1;
    text-align: right;
    text-shadow: 0 0 2px rgba(0, 255, 102, 0.45);
}

.yc-game-player.clock-low .yc-player-clock {
    color: #ffdb66;
    text-shadow: 0 0 2px rgba(255, 219, 102, 0.55);
}

.yc-classic-board {
    width: min(100%, calc(100dvh - 340px), 760px);
    min-width: 160px;
    aspect-ratio: 1;
    align-self: center;
    justify-self: center;
    position: relative;
    z-index: 1;
    padding: 8px;
    border: 4px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.10) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.10) 1px, transparent 1px),
        #8f886f;
    background-size: 8px 8px;
    box-shadow:
        inset 1px 1px 0 #3f3a2d,
        inset -1px -1px 0 #f6edcf,
        0 1px 0 #ffffff;
}

.yc-classic-board.yc-board-playable {
    cursor: grab;
}

.yc-classic-board.yc-board-has-move {
    border-color: #5f5a48 #ffffff #ffffff #5f5a48;
}

.yc-classic-board.yc-board-has-capture {
    border-color: #8a1f1f #ffffff #ffffff #8a1f1f;
}

.yc-classic-board.yc-board-update {
    animation: ycBoardUpdate 520ms steps(2, end);
}

.yc-classic-board .board-b72b1 {
    border: 0;
}

.yc-classic-board .highlight-square,
.yc-classic-board .legal-square,
.yc-classic-board .selected-square {
    outline: 2px dotted #241d54;
    outline-offset: -4px;
}

.yc-classic-board .yc-last-move-square {
    box-shadow:
        inset 0 0 0 4px rgba(255, 230, 40, 0.78),
        inset 0 0 18px rgba(255, 224, 32, 0.34) !important;
}

.yc-classic-board .yc-last-move-to {
    box-shadow:
        inset 0 0 0 4px rgba(255, 230, 40, 0.9),
        inset 0 0 22px rgba(255, 224, 32, 0.42) !important;
}

.yc-board-feedback {
    display: none;
    width: min(100%, 760px);
    min-height: 20px;
    padding: 3px 6px;
    border: 2px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: #e8dfbd;
    color: #202020;
    font-family: "Tahoma", "Arial", sans-serif;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-game-player,
.yc-board-feedback {
    position: relative;
    z-index: 2;
}

.yc-board-feedback.has-move {
    background: #dbe8ff;
    color: #001f73;
    font-weight: 700;
}

.yc-board-feedback.capture {
    background: #ffe2c4;
    color: #7a120c;
}

@keyframes ycBoardUpdate {
    0% {
        box-shadow:
            inset 1px 1px 0 #3f3a2d,
            inset -1px -1px 0 #f6edcf,
            0 0 0 2px #fff3a6;
    }
    100% {
        box-shadow:
            inset 1px 1px 0 #3f3a2d,
            inset -1px -1px 0 #f6edcf,
            0 1px 0 #ffffff;
    }
}

.yc-move-panel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto minmax(76px, 16vh);
    gap: 4px;
    padding: 4px;
    min-height: 0;
    overflow: hidden;
    background: #c8bea0;
}

.yc-game-watch-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 4px;
    padding: 3px 5px;
    border-bottom: 1px solid #7a735f;
    background: #e8dfbd;
    color: #202020;
    font-size: 10px;
    font-weight: 700;
}

.yc-game-watch-strip span {
    min-width: 0;
    padding: 2px 4px;
    border: 1px solid;
    border-color: var(--yc-border-gray) #ffffff #ffffff var(--yc-border-gray);
    background: var(--yc-panel-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-classic-move-list {
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow-y: auto;
    background: var(--yc-panel-white);
    font-family: "Courier New", Courier, monospace;
    font-size: 11px;
    line-height: 1.25;
    border: 1px solid #8f866e;
}

.yc-move-row {
    display: grid;
    grid-template-columns: 44px minmax(78px, 1fr) minmax(78px, 1fr);
    min-height: 21px;
}

.yc-move-row span,
.yc-move-empty {
    padding: 3px 5px;
    border-right: 1px solid #b9b096;
    border-bottom: 1px solid #b9b096;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-move-row:nth-child(odd) {
    background: #f1e7c4;
}

.yc-move-row.latest {
    background: #dbe8ff;
    color: #001f73;
    font-weight: 700;
}

.yc-move-row.latest span {
    border-bottom-color: #7e9ad1;
}

.yc-move-row.capture {
    box-shadow: inset 3px 0 0 #8a1f1f;
}

.yc-move-row.latest.capture {
    background: #ffe2c4;
    color: #7a120c;
}

.yc-row-pending span {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    color: #4d3a00;
    font-weight: 700;
    background: #fff0ad;
}

.yc-row-pending strong {
    color: #241d54;
}

.yc-row-pending .yc-cancel-seek {
    min-height: 19px;
    padding: 1px 6px;
    font-size: 10px;
}

.yc-move-number {
    color: #241d54;
    font-weight: 700;
}

.yc-move-empty {
    color: #484848;
    font-style: italic;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-window {
    grid-template-columns: 154px minmax(480px, 1fr) clamp(330px, 28vw, 440px);
    gap: 3px;
    padding: 4px;
    background:
        linear-gradient(180deg, #e6e6e6 0, #b8b8b8 24px, transparent 24px),
        #b6b6b6;
}

.yc-shell.yc-board-style-yahoo-table.yc-table-open {
    grid-template-rows: auto minmax(0, 1fr) minmax(132px, 21vh) auto;
}

.yc-shell.yc-board-style-yahoo-table {
    position: relative;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    margin: 4px;
    padding-top: 38px;
    border: 2px solid;
    border-color: #ffffff #404040 #404040 #ffffff;
    background: #c0c0c0;
    outline: 1px solid #000000;
}

.yc-shell.yc-board-style-yahoo-table::before {
    content: "Game: Chess - Room: CAISSA Lobby - Table";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 18px;
    padding: 2px 56px 2px 6px;
    border-bottom: 1px solid #000000;
    background:
        linear-gradient(135deg, #ffffff 0 42%, #808080 43% 100%) right 4px top 3px / 14px 12px no-repeat,
        linear-gradient(135deg, #ffffff 0 42%, #808080 43% 100%) right 21px top 3px / 14px 12px no-repeat,
        linear-gradient(135deg, #ffffff 0 42%, #808080 43% 100%) right 38px top 3px / 14px 12px no-repeat,
        linear-gradient(90deg, #000080, #1084d0);
    color: #ffffff;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yc-shell.yc-board-style-yahoo-table::after {
    content: "Game   Table   View   Options   Help";
    position: absolute;
    top: 21px;
    left: 2px;
    right: 2px;
    height: 17px;
    padding: 2px 6px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #808080;
    background: #c0c0c0;
    color: #000000;
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
    font-size: 11px;
    line-height: 12px;
    white-space: pre;
}

.yc-shell.yc-board-style-yahoo-table .yc-page,
.yc-shell.yc-board-style-yahoo-table .yc-workspace,
.yc-shell.yc-board-style-yahoo-table .yc-chat-panel,
.yc-shell.yc-board-style-yahoo-table .yc-browser-status {
    font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
}

.yc-shell.yc-board-style-yahoo-table,
.yc-shell.yc-board-style-yahoo-table .yc-game-table-header,
.yc-shell.yc-board-style-yahoo-table .yc-panel-heading,
.yc-shell.yc-board-style-yahoo-table .yc-panel-title,
.yc-shell.yc-board-style-yahoo-table .yc-game-player,
.yc-shell.yc-board-style-yahoo-table .yc-browser-status,
.yc-shell.yc-board-style-yahoo-table .yc-chat-status {
    user-select: none;
}

.yc-shell.yc-board-style-yahoo-table input,
.yc-shell.yc-board-style-yahoo-table select,
.yc-shell.yc-board-style-yahoo-table textarea,
.yc-shell.yc-board-style-yahoo-table .yc-chat-body,
.yc-shell.yc-board-style-yahoo-table .yc-game-system-log,
.yc-shell.yc-board-style-yahoo-table .yc-classic-move-list {
    user-select: text;
}

.yc-page:has(.yc-shell.yc-board-style-yahoo-table) {
    background: #008080;
}

.yc-shell.yc-board-style-yahoo-table .yc-header {
    min-height: 58px;
    padding: 4px 7px;
    border-color: #ffffff #7a7a7a #7a7a7a #ffffff;
    background:
        linear-gradient(180deg, #ffffff 0, #fff7d8 58%, #dcdcdc 59%, #b8b8b8 100%);
}

.yc-shell.yc-board-style-yahoo-table .yc-brand-mark {
    width: 30px;
    height: 30px;
    border-color: #ffffff #808080 #808080 #ffffff;
    background: #f5f5f5;
    color: #101010;
}

.yc-shell.yc-board-style-yahoo-table .yc-brand h2 {
    text-shadow: 1px 1px 0 #ffe98a, 2px 2px 0 #5a1b1b;
}

.yc-shell.yc-board-style-yahoo-table .yc-brand-caissa {
    color: #a90000;
}

.yc-shell.yc-board-style-yahoo-table .yc-brand-rest {
    color: #3a1f7a;
}

.yc-shell.yc-board-style-yahoo-table .yc-tab.active {
    background: #a85f20;
    border-color: #e8b17d #5a2600 #5a2600 #fff2d8;
}

.yc-shell.yc-board-style-yahoo-table .yc-tab,
.yc-shell.yc-board-style-yahoo-table .yc-classic-button,
.yc-shell.yc-board-style-yahoo-table .yc-send-button,
.yc-shell.yc-board-style-yahoo-table .yc-row-action {
    border-width: 2px;
    border-color: #ffffff #404040 #404040 #ffffff;
    cursor: default;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
}

.yc-shell.yc-board-style-yahoo-table .yc-tab:hover,
.yc-shell.yc-board-style-yahoo-table .yc-classic-button:hover:not(:disabled),
.yc-shell.yc-board-style-yahoo-table .yc-send-button:hover:not(:disabled),
.yc-shell.yc-board-style-yahoo-table .yc-row-action:hover:not(:disabled) {
    background: #d4d0c8;
    color: #000000;
}

.yc-shell.yc-board-style-yahoo-table .yc-tab:active,
.yc-shell.yc-board-style-yahoo-table .yc-classic-button:active:not(:disabled),
.yc-shell.yc-board-style-yahoo-table .yc-send-button:active:not(:disabled),
.yc-shell.yc-board-style-yahoo-table .yc-row-action:active:not(:disabled) {
    border-color: #404040 #ffffff #ffffff #404040;
    box-shadow: inset 1px 1px 0 #808080;
    transform: none;
}

.yc-shell.yc-board-style-yahoo-table .yc-tab:active {
    padding: 1px 6px;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-classic-button:active:not(:disabled) {
    padding: 1px 5px 2px;
}

.yc-shell.yc-board-style-yahoo-table .yc-send-button:active:not(:disabled),
.yc-shell.yc-board-style-yahoo-table .yc-row-action:active:not(:disabled) {
    padding-top: 0;
    padding-left: 0;
}

.yc-shell.yc-board-style-yahoo-table .yc-tab:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-classic-button:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-send-button:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-row-action:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-classic-field:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-tab:focus,
.yc-shell.yc-board-style-yahoo-table .yc-classic-button:focus,
.yc-shell.yc-board-style-yahoo-table .yc-send-button:focus,
.yc-shell.yc-board-style-yahoo-table .yc-row-action:focus,
.yc-shell.yc-board-style-yahoo-table .yc-classic-field:focus {
    outline: 1px dotted #000000;
    outline-offset: -4px;
    box-shadow:
        inset 0 0 0 1px #000000,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-button:disabled,
.yc-shell.yc-board-style-yahoo-table .yc-row-action:disabled,
.yc-shell.yc-board-style-yahoo-table .yc-classic-field:disabled {
    cursor: default;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-field {
    cursor: default;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-field:hover:not(:disabled) {
    background: #ffffff;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-table-header {
    min-height: 26px;
    padding: 2px 4px;
    border-color: #85a7ef #001f73 #001f73 #dce8ff;
    background: linear-gradient(180deg, #3f72d8, #1740a0 52%, #0d2a78);
    color: #ffffff;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-table-header span,
.yc-shell.yc-board-style-yahoo-table .yc-game-table-header strong {
    padding: 1px 4px 2px;
    border-color: #0b2367 #86a7f0 #86a7f0 #0b2367;
    background: #e9eefc;
    color: #101010;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-controls,
.yc-shell.yc-board-style-yahoo-table .yc-game-board-panel,
.yc-shell.yc-board-style-yahoo-table .yc-move-panel {
    border-width: 2px;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #c0c0c0;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-controls {
    gap: 2px;
    padding: 4px;
    background: #79aaa5;
}

.yc-shell.yc-board-style-yahoo-table .yc-actions-panel {
    gap: 3px;
}

.yc-shell.yc-board-style-yahoo-table .yc-table-game-options {
    padding: 4px;
    background: #d8d0a8;
}

.yc-shell.yc-board-style-yahoo-table .yc-check-control,
.yc-shell.yc-board-style-yahoo-table .yc-time-control,
.yc-shell.yc-board-style-yahoo-table .yc-options-heading {
    font-size: 10px;
    line-height: 1.1;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-panel,
.yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-status-card {
    border-color: #3e6b66 #c6e3de #c6e3de #3e6b66;
    background: #d8d0a8;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-panel-title,
.yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-options-control label {
    min-height: 18px;
    padding: 2px 5px;
    border: 1px solid #f5efc8;
    background: #efe4b5;
    color: #001f73;
    line-height: 1.1;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-classic-button {
    min-height: 20px;
    padding: 1px 5px 2px;
    font-size: 10px;
    line-height: 1.05;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-classic-field {
    min-height: 20px;
    padding: 1px 3px;
    font-size: 10px;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-board-panel {
    justify-content: center;
    align-content: center;
    padding: 4px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
        #8a9774;
    background-size: 10px 10px;
}

.yc-shell.yc-board-style-yahoo-table .yc-move-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto minmax(82px, 17vh);
    gap: 4px;
    padding: 4px;
}

.yc-shell.yc-board-style-yahoo-table .yc-move-panel .yc-panel-heading {
    min-height: 24px;
    padding: 3px 5px;
    border-bottom: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    background: #d8d0a8;
}

.yc-shell.yc-board-style-yahoo-table .yc-move-panel .yc-panel-heading h3 {
    color: #001f73;
    font-size: 12px;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-watch-strip {
    padding: 2px 4px;
    background: #efe8c8;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-watch-strip span {
    min-height: 18px;
    padding: 1px 4px;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-player {
    min-height: 25px;
    padding: 3px 7px;
    grid-template-columns: 16px minmax(0, 1fr) 120px 64px 74px;
    border-color: #ffffff #707070 #707070 #ffffff;
    background: linear-gradient(180deg, #f7f7f7, #cfcfcf);
    color: #000000;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-player .yc-player-rating::before {
    width: 20px;
    height: 20px;
    vertical-align: -6px;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-player.black {
    background: linear-gradient(180deg, #d8d8d8, #a8a8a8);
}

.yc-shell.yc-board-style-yahoo-table .yc-game-player.white {
    background: linear-gradient(180deg, #ffffff, #dcdcdc);
}

.yc-shell.yc-board-style-yahoo-table .yc-game-player.turn-active {
    background: linear-gradient(180deg, #fff6a5, #f0cb45);
    border-color: #ffffff #8a6b00 #8a6b00 #ffffff;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-board {
    padding: 10px;
    border-width: 5px;
    border-color: #2a241c #ffffff #ffffff #2a241c;
    background:
        linear-gradient(180deg, #756b51, #4d452f);
    box-shadow:
        inset 2px 2px 0 #2f2b20,
        inset -2px -2px 0 #e8e2c8,
        0 0 0 3px #1c1c1c,
        0 0 0 5px #8f866c;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-board .white-1e1d7 {
    background-color: #fff4c7 !important;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-board .black-3c85d {
    background-color: #5f8f4e !important;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-board.yc-board-update {
    animation: none;
}

.yc-shell.yc-board-style-yahoo-table .yc-board-feedback {
    display: none;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-board.yc-board-playable {
    cursor: grab;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-board:not(.yc-board-playable) {
    cursor: default;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-move-list,
.yc-shell.yc-board-style-yahoo-table .yc-game-system-log,
.yc-shell.yc-board-style-yahoo-table .yc-chat-body {
    background: #ffffff;
    color: #000000;
    scrollbar-color: #d4d0c8 #ffffff;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-system-panel {
    min-height: 0;
    padding: 0;
    gap: 0;
    border-color: #808080 #ffffff #ffffff #808080;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-system-panel .yc-panel-title {
    margin: 0;
    border-width: 0 0 1px;
    border-color: #ffffff #808080 #808080 #ffffff;
    background: #5e7f4c;
    color: #ffffff;
}

.yc-shell.yc-board-style-yahoo-table .yc-game-system-log {
    min-height: 0;
    max-height: none;
    height: 100%;
    border-width: 0;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-move-list::-webkit-scrollbar,
.yc-shell.yc-board-style-yahoo-table .yc-game-system-log::-webkit-scrollbar,
.yc-shell.yc-board-style-yahoo-table .yc-chat-body::-webkit-scrollbar {
    width: 16px;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-move-list::-webkit-scrollbar-track,
.yc-shell.yc-board-style-yahoo-table .yc-game-system-log::-webkit-scrollbar-track,
.yc-shell.yc-board-style-yahoo-table .yc-chat-body::-webkit-scrollbar-track {
    background: #ffffff;
    border-left: 1px solid #808080;
}

.yc-shell.yc-board-style-yahoo-table .yc-classic-move-list::-webkit-scrollbar-thumb,
.yc-shell.yc-board-style-yahoo-table .yc-game-system-log::-webkit-scrollbar-thumb,
.yc-shell.yc-board-style-yahoo-table .yc-chat-body::-webkit-scrollbar-thumb {
    background: #d4d0c8;
    border: 2px solid;
    border-color: #ffffff #404040 #404040 #ffffff;
}

.yc-shell.yc-board-style-yahoo-table .yc-chat-status {
    min-height: 20px;
    padding: 3px 6px;
    background: #d98214;
    color: #ffffff;
}

.yc-shell.yc-board-style-yahoo-table .yc-chat-panel {
    border-color: #808080 #ffffff #ffffff #808080;
    background: #c0c0c0;
    min-height: 0;
}

.yc-shell.yc-board-style-yahoo-table .yc-chat-body {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    font-size: 12px;
    line-height: 1.4;
}

.yc-shell.yc-board-style-yahoo-table .yc-say-row {
    border-top: 1px solid #808080;
    background: #c0c0c0;
}

.yc-shell.yc-board-style-yahoo-table .yc-browser-status {
    gap: 2px;
    padding: 2px;
    border-top: 1px solid #ffffff;
    background: #c0c0c0;
}

.yc-shell.yc-board-style-yahoo-table .yc-browser-status span {
    min-height: 18px;
    border: 1px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    background: #d4d0c8;
    color: #000000;
    font-size: 11px;
    line-height: 14px;
}

.yc-shell.yc-board-style-yahoo-table .yc-move-row:nth-child(odd) {
    background: #f0f0f0;
}

.yc-shell.yc-board-style-yahoo-table .yc-move-row.latest {
    background: #d7e5ff;
    color: #001f73;
}

.yc-shell.yc-board-style-yahoo-table .yc-move-row:hover,
.yc-shell.yc-board-style-yahoo-table .yc-table-row:hover:not(.yc-table-head),
.yc-shell.yc-board-style-yahoo-table .yc-player-row:hover:not(.yc-player-head) {
    background: #e8eefc;
    color: #000000;
}

.yc-shell.yc-board-style-yahoo-table .yc-board-feedback,
.yc-shell.yc-board-style-yahoo-table .yc-options-control {
    border-color: #808080 #ffffff #ffffff #808080;
    background: #e6e6e6;
}

.yc-shell.yc-board-style-yahoo-table .yc-tab:focus,
.yc-shell.yc-board-style-yahoo-table .yc-tab:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-classic-button:focus,
.yc-shell.yc-board-style-yahoo-table .yc-classic-button:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-send-button:focus,
.yc-shell.yc-board-style-yahoo-table .yc-send-button:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-row-action:focus,
.yc-shell.yc-board-style-yahoo-table .yc-row-action:focus-visible,
.yc-shell.yc-board-style-yahoo-table .yc-classic-field:focus,
.yc-shell.yc-board-style-yahoo-table .yc-classic-field:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: -4px;
    box-shadow:
        inset 0 0 0 1px #000000,
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #dfdfdf;
}

.yc-shell.yc-board-style-yahoo-table .yc-tab:disabled:focus,
.yc-shell.yc-board-style-yahoo-table .yc-classic-button:disabled:focus,
.yc-shell.yc-board-style-yahoo-table .yc-row-action:disabled:focus,
.yc-shell.yc-board-style-yahoo-table .yc-classic-field:disabled:focus {
    outline: none;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf;
}

@media (max-width: 1180px) {
    .yc-workspace {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .yc-player-panel,
    .yc-move-panel {
        grid-column: 1 / -1;
    }

    .yc-game-window {
        grid-template-columns: 158px minmax(0, 1fr);
    }

    .yc-game-table-header {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .yc-classic-board,
    .yc-game-player,
    .yc-board-feedback {
        width: min(100%, calc(100dvh - 360px), 700px);
    }

    .yc-move-panel {
        grid-column: 1 / -1;
        min-height: 220px;
    }
}

@media (max-width: 820px) {
    .yc-page {
        height: 100dvh;
        padding: 0;
        overflow-y: auto;
    }

    .yc-shell {
        height: auto;
        min-height: 100%;
    }

    .yc-header,
    .yc-workspace,
    .yc-game-window {
        grid-template-columns: minmax(0, 1fr);
    }

    .yc-game-table-header {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yc-room-tabs {
        justify-content: flex-start;
    }

    .yc-era-note {
        text-align: left;
    }

    .yc-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .yc-login-panel,
    .yc-actions-panel,
    .yc-create-table-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .yc-table-panel {
        overflow-x: clip;
    }

    .yc-workspace,
    .yc-game-window {
        overflow: visible;
    }

    .yc-table-head,
    .yc-player-head {
        display: none;
    }

    .yc-table-grid,
    .yc-player-list {
        display: grid;
        gap: 8px;
    }

    .yc-table-row {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
        padding: 10px;
        border: 1px solid var(--yc-border-gray);
        background: var(--yc-classic-cream);
    }

    .yc-table-row > span,
    .yc-player-row > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .yc-table-row:not(.yc-row-empty) > span::before,
    .yc-player-row:not(.yc-row-empty) > span::before {
        display: block;
        margin-bottom: 2px;
        color: #274b27;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .yc-table-row > span:nth-child(1)::before { content: "Table"; }
    .yc-table-row > span:nth-child(2)::before { content: "Watch"; }
    .yc-table-row > span:nth-child(3)::before { content: "White"; }
    .yc-table-row > span:nth-child(4)::before { content: "Black"; }
    .yc-table-row > span:nth-child(5)::before { content: "Options"; }
    .yc-table-row > span:nth-child(6)::before { content: "Watching"; }

    .yc-table-row > span:nth-child(3),
    .yc-table-row > span:nth-child(4),
    .yc-table-row > span:nth-child(5),
    .yc-table-row > span:nth-child(6) {
        grid-column: 1 / -1;
    }

    .yc-row-action,
    .yc-table-row button,
    .yc-player-row button {
        min-height: 44px;
        width: 100%;
    }

    .yc-player-row {
        min-width: 0;
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) minmax(76px, auto);
        gap: 6px 10px;
        padding: 10px;
        border: 1px solid var(--yc-border-gray);
        background: var(--yc-classic-cream);
    }

    .yc-player-row > span:nth-child(1)::before { content: "Color"; }
    .yc-player-row > span:nth-child(2)::before { content: "Name"; }
    .yc-player-row > span:nth-child(3)::before { content: "Rating"; }
    .yc-player-row > span:nth-child(4)::before { content: "Table"; }

    .yc-player-row > span:nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .yc-tournament-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .yc-tournament-badge {
        justify-self: start;
    }

    .yc-tournament-list {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .yc-computer-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .yc-computer-badge {
        justify-self: start;
    }

    .yc-computer-list {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .yc-teaching-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .yc-teaching-badge {
        justify-self: start;
    }

    .yc-teaching-list {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .yc-chat-body {
        height: clamp(150px, 28dvh, 240px);
        font-size: 12px;
        line-height: 1.45;
    }

    .yc-classic-board,
    .yc-game-player,
    .yc-board-feedback {
        width: min(calc(100vw - 28px), calc(100dvh - 210px), 560px);
        max-width: 100%;
    }

    .yc-classic-board {
        aspect-ratio: 1 / 1;
        height: auto;
        justify-self: center;
    }

    .yc-game-window {
        gap: 8px;
    }

    .yc-shell.yc-board-style-yahoo-table .yc-game-window,
    .yc-shell.yc-table-open .yc-game-window {
        grid-template-columns: minmax(0, 1fr);
    }

    .yc-game-table-header {
        order: 0;
    }

    .yc-game-board-panel {
        order: 1;
        min-width: 0;
        padding: 8px;
        justify-items: center;
    }

    .yc-move-panel {
        order: 2;
        min-height: 0;
        display: grid;
        gap: 8px;
    }

    .yc-game-controls {
        order: 3;
        display: grid;
        gap: 8px;
    }

    .yc-game-controls .yc-classic-button,
    .yc-game-controls .yc-classic-field,
    .yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-classic-button,
    .yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-classic-field,
    .yc-sidebar .yc-classic-button,
    .yc-sidebar .yc-classic-field,
    .yc-room-tabs .yc-tab {
        min-height: 44px !important;
        height: auto !important;
        font-size: 12px;
        padding-block: 8px;
    }

    .yc-check-control input,
    .yc-time-control input {
        width: 34px;
        height: 34px;
    }

    .yc-game-system-log,
    .yc-classic-move-list {
        max-height: 180px;
        overflow-y: auto;
    }

    .yc-game-player {
        grid-template-columns: 14px minmax(0, 1fr) auto;
        min-height: 44px;
    }

    .yc-player-state,
    .yc-player-rating {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .yc-chat-status {
        display: grid;
    }

    .yc-browser-status {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .yc-say-row input,
    .yc-say-row .yc-send-button {
        min-height: 44px !important;
        height: auto !important;
    }
}

@media (max-width: 950px) and (max-height: 480px) and (orientation: landscape) {
    .yc-page {
        overflow-y: auto;
    }

    .yc-header {
        display: none;
    }

    .yc-workspace {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 8px;
        padding: 6px;
    }

    .yc-table-panel,
    .yc-player-panel {
        min-width: 0;
    }

    .yc-table-panel {
        overflow-x: auto;
    }

    .yc-table-row {
        min-width: 620px;
    }

    .yc-chat-panel {
        max-height: 150px;
        overflow-y: auto;
    }

    .yc-game-window[aria-hidden="false"] {
        grid-template-columns: minmax(0, max-content) minmax(220px, 1fr);
        align-items: start;
        gap: 8px;
        padding: 6px;
    }

    .yc-shell.yc-board-style-yahoo-table .yc-game-window[aria-hidden="false"],
    .yc-shell.yc-table-open .yc-game-window[aria-hidden="false"] {
        grid-template-columns: minmax(0, max-content) minmax(220px, 1fr);
    }

    .yc-game-table-header {
        grid-column: 1 / -1;
    }

    .yc-game-board-panel {
        grid-column: 1;
    }

    .yc-move-panel,
    .yc-game-controls {
        grid-column: 2;
    }

    .yc-classic-board,
    .yc-game-player,
    .yc-board-feedback {
        width: min(calc(100dvh - 96px), calc(50vw - 24px), 430px);
    }

    .yc-game-controls .yc-classic-button,
    .yc-game-controls .yc-classic-field,
    .yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-classic-button,
    .yc-shell.yc-board-style-yahoo-table .yc-game-controls .yc-classic-field {
        min-height: 44px !important;
        height: auto !important;
        font-size: 12px;
        padding-block: 8px;
    }

    .yc-check-control input,
    .yc-time-control input {
        min-width: 34px;
        min-height: 34px;
    }

    .yc-game-controls .yc-panel,
    .yc-game-info-panel,
    .yc-game-system-panel {
        max-height: calc(100dvh - 82px);
        overflow-y: auto;
    }

    .yc-browser-status {
        display: none;
    }
}

@media (min-width: 821px) and (max-width: 1180px) and (orientation: landscape) {
    .yc-classic-button,
    .yc-classic-field,
    .yc-shell.yc-board-style-yahoo-table .yc-classic-button,
    .yc-shell.yc-board-style-yahoo-table .yc-classic-field,
    .yc-tab,
    .yc-say-row input,
    .yc-send-button {
        min-height: 36px !important;
        height: auto !important;
    }

    .yc-check-control input,
    .yc-time-control input {
        width: 34px;
        height: 34px;
    }
}