/* Cocoa-brown dark surfaces approved for the existing cheese UI.
   Keep the cream tournament cards, game felt, and C / T-C wallet tiles intact. */
:root {
  color-scheme: dark;
  --cocoa-page: #29221e;
  --cocoa-panel: #382e27;
  --cocoa-raised: #44382e;
  --cocoa-input: #332a24;
  --cocoa-border: #9c753f;
  --cocoa-title: #f2c574;
  --cocoa-text: #fff3e0;
  --cocoa-muted: #d4c4aa;
}

/* Lobby, detail and their fixed chrome only; the poker table keeps its felt. */
body:not(.holdem-table-active):not(.holdem-cash-table-active),
body.holdem-lobby-active #lobby,
body.holdem-detail-active #detailView,
body.holdem-detail-active #detailBody,
.tournament-list-scroll-area,
.lobby-feature-view {
  background: var(--cocoa-page);
  color: var(--cocoa-text);
}
body:not(.holdem-table-active):not(.holdem-cash-table-active) #topbar {
  background: linear-gradient(180deg, #3a3029, var(--cocoa-page));
  border-bottom-color: #795e3a;
}
.tabs,
.struct-chips,
.lobby-toolbar,
.lobby-feature-view-header {
  background: var(--cocoa-panel);
  border-color: #795e3a;
}
.tab,
.struct-chip,
.lobby-toolbar input::placeholder {
  color: var(--cocoa-muted);
}
.lobby-toolbar input,
.lobby-toolbar select {
  background: var(--cocoa-input);
  color: var(--cocoa-text);
  border-color: #795e3a;
}
.lobby-feature-btn:not(.is-active),
#communityMenuBar .community-menu-btn:not(.is-active) {
  background: linear-gradient(180deg, var(--cocoa-raised), var(--cocoa-panel));
  border-color: var(--cocoa-border);
  color: var(--cocoa-text);
}
.lobby-feature-btn:not(.is-active) span,
#communityMenuBar .community-menu-btn:not(.is-active) span {
  color: var(--cocoa-muted);
}
.lobby-feature-view-header h2,
.myinfo-sheet .myinfo-wallet-heading strong {
  color: var(--cocoa-title);
}

/* Existing sticker-book my-info layout and the coloured wallet cards remain. */
.myinfo-sheet {
  --mi-face: var(--cocoa-raised);
}
.myinfo-sheet .myinfo-card {
  background: var(--cocoa-page) !important;
}
.myinfo-sheet .myinfo-section,
.myinfo-sheet .myinfo-secondary {
  background: var(--cocoa-raised) !important;
}
.myinfo-sheet .myinfo-lounge-shortcuts a {
  background: var(--cocoa-raised);
  border-color: var(--cocoa-border);
  color: var(--cocoa-text);
}
.myinfo-sheet .myinfo-lounge-shortcuts small,
.myinfo-sheet .myinfo-wallet-heading span {
  color: var(--cocoa-muted);
}
.myinfo-sheet .myinfo-nick-grid input,
.myinfo-sheet .myinfo-exchange-row input,
.myinfo-sheet .myinfo-convert-grid select,
.myinfo-sheet .myinfo-convert-grid input {
  background: var(--cocoa-input) !important;
  color: var(--cocoa-text);
}

/* 메인 로비: 공식 게임의 크림 카드는 그대로 두고 친목방만 승인된 딥 플럼색으로 구분한다. */
#tournamentList .tcard.lobby-social-card,
#tournamentList .tcard.lobby-social-card:hover,
#tournamentList .tcard.lobby-social-card.is-mine,
#tournamentList .tcard.lobby-social-card.is-playing {
  background: linear-gradient(180deg, #4a3650, #35283e) !important;
  border-color: #ad87bd !important;
  box-shadow: 0 4px 0 #211826, 0 8px 16px rgba(0, 0, 0, .3) !important;
}
#tournamentList .tcard.lobby-social-card:hover { border-color: #d1a9e1 !important; }
#tournamentList .tcard.lobby-social-card:focus-visible {
  outline: 2px solid #f4d48a;
  outline-offset: 2px;
}
#tournamentList .lobby-social-card::before { background: linear-gradient(180deg, #d6addf, #82618d) !important; }
#tournamentList .lobby-social-card .tcard-head { padding-right: 0; }
#tournamentList .lobby-social-card h3,
#tournamentList .lobby-social-card .tcard-title-marquee { color: #fff2fc !important; }
#tournamentList .lobby-social-card .stat .lbl,
#tournamentList .lobby-social-card .tcard-foot-text,
#tournamentList .lobby-social-card .tcard-foot-left { color: #d9c5df !important; }
#tournamentList .lobby-social-card .stat .val { color: #fff2fc !important; }
#tournamentList .lobby-social-card .stat.prize .val,
#tournamentList .lobby-social-card .lobby-social-go,
#tournamentList .lobby-social-card .countdown { color: #f3d5ff !important; }
#tournamentList .lobby-social-card .struct-badge,
#tournamentList .lobby-social-card .status-pill {
  background: rgba(232, 202, 239, .15) !important;
  border: 1px solid rgba(232, 202, 239, .45) !important;
  color: #f7e2fb !important;
}
#tournamentList .lobby-social-card .status-pill.s-mine {
  background: #e6d1ef !important;
  color: #52315e !important;
}
#tournamentList .lobby-social-card .tcard-progress {
  height: 5px !important;
  background: #5d4566 !important;
  border: 0 !important;
  overflow: hidden !important;
}
#tournamentList .lobby-social-card .tcard-progress .fill {
  min-width: 0 !important;
  background: linear-gradient(90deg, #a87bbb, #e6c6ee) !important;
}
#tournamentList .lobby-social-card .tcard-progress::after,
#tournamentList .lobby-social-card .tcard-progress .fill::after { content: none !important; }
#tournamentList .lobby-social-card.is-idle { opacity: .76; border-style: dashed !important; }
#tournamentList .lobby-social-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 2px 6px 2px 2px;
  border-radius: 999px;
  background: #e6d1ef;
  color: #52315e;
  font: 11px/1 'Jua', sans-serif;
  white-space: nowrap;
}
#tournamentList .lobby-social-badge img {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #211826;
  object-fit: cover;
}
@media (max-width: 390px) {
  #tournamentList .lobby-social-badge { font-size: 10px; padding-right: 4px; }
  #tournamentList .lobby-social-badge img { width: 14px; height: 14px; }
}

/* Game families remain cream cards, with a clear type badge and a restrained tint. */
#tournamentList .tcard:not(.lobby-social-card) { --lobby-type-accent: #bd8029; }
#tournamentList .tcard.lobby-type-turbo { --lobby-type-accent: #d56853; background: linear-gradient(180deg, #fff4e7, #ffe6d5) !important; border-color: #e8a283 !important; }
#tournamentList .tcard.lobby-type-bounty { --lobby-type-accent: #9d4d65; background: linear-gradient(180deg, #fff2ef, #f8dfdf) !important; border-color: #bd8491 !important; }
#tournamentList .tcard.lobby-type-mystery { --lobby-type-accent: #4a87b7; background: linear-gradient(180deg, #f5fbff, #dfeef6) !important; border-color: #82acc6 !important; }
#tournamentList .tcard.lobby-type-satellite { --lobby-type-accent: #7964aa; background: linear-gradient(180deg, #faf7ff, #e9e0f7) !important; border-color: #ad9acb !important; }
#tournamentList .tcard.lobby-type-hyper { --lobby-type-accent: #b85b48; background: linear-gradient(180deg, #fff4ee, #f7ddd5) !important; border-color: #d39987 !important; }
#tournamentList .tcard.lobby-type-deep { --lobby-type-accent: #667994; background: linear-gradient(180deg, #f8f9fd, #e3e9f2) !important; border-color: #9eabc0 !important; }
#tournamentList .tcard:not(.lobby-social-card)::before { width: 6px !important; background: var(--lobby-type-accent) !important; }
#tournamentList .tcard .tcard-type-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--lobby-type-accent, #bd8029);
  background: #fff9ed;
  font: 11px/1 'Jua', sans-serif;
  white-space: nowrap;
}
#tournamentList .tcard.lobby-type-turbo .tcard-type-badge { background: #ffe2d5; color: #a24434; }
#tournamentList .tcard.lobby-type-bounty .tcard-type-badge { background: #f6dae0; color: #783249; }
#tournamentList .tcard.lobby-type-mystery .tcard-type-badge { background: #dcecf8; color: #2c668f; }
#tournamentList .tcard.lobby-type-satellite .tcard-type-badge { background: #e8def6; color: #614789; }
#tournamentList .tcard.lobby-type-hyper .tcard-type-badge { background: #f7ddd5; color: #954634; }
#tournamentList .tcard.lobby-type-deep .tcard-type-badge { background: #e0e7f0; color: #4d607c; }
#detailTags .td-game-type-badge { border: 1px solid #b78332; background: #5b3f1e; color: #ffe4a3; }
#detailTags .td-game-type-badge.is-turbo { border-color: #cb785b; background: #5b352e; color: #ffd9c8; }
#detailTags .td-game-type-badge.is-bounty { border-color: #a7657b; background: #4d2f3b; color: #f5d6e1; }
#detailTags .td-game-type-badge.is-mystery { border-color: #6496b7; background: #2d4250; color: #d8edfb; }
#detailTags .td-game-type-badge.is-satellite { border-color: #a48bc8; background: #413452; color: #e9dcfb; }
#detailTags .td-game-type-badge.is-hyper { border-color: #c97b65; background: #51342d; color: #f8ded4; }
#detailTags .td-game-type-badge.is-deep { border-color: #8e9bb3; background: #35404e; color: #e1e8f3; }
#tournamentList .tcard .tcard-freezeout,
#tournamentList .lobby-social-card .lobby-social-freezeout {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 5px;
  padding: 2px 5px;
  font: 10px/1.1 'Jua', sans-serif;
  white-space: nowrap;
}
#tournamentList .tcard .tcard-freezeout { background: #e9ddc8; color: #704c23; }
#tournamentList .lobby-social-card .lobby-social-freezeout { background: rgba(245, 224, 250, .2); color: #f4ddfa; }
#communityMenuRoot .mp-freezeout-badge,
#communityMenuRoot .mp-td-tags > .mp-freezeout-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid #b886bc;
  border-radius: 999px;
  background: #e7d2eb;
  color: #51315f;
  font: 10px/1 'Jua', sans-serif;
  white-space: nowrap;
}
.se-detail .se-banner-request-note {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid #977547;
  border-radius: 8px;
  background: #3d3026;
  color: #f3d8a8;
  font-size: 11px;
  line-height: 1.5;
}
@media (max-width: 390px) {
  #tournamentList .tcard .tcard-type-badge { font-size: 10px; padding-inline: 5px; }
  #tournamentList .lobby-social-card .lobby-social-freezeout { font-size: 9px; }
}

/* The carousel fills the existing mobile-width app without widening the PC layout. */
#modeSwitch { width: calc(100% - 12px) !important; max-width: none !important; margin-top: 8px; }
#lobbyNextGame.next-game { display: block; padding: 4px; cursor: default; }
.main-banner-viewport { width: 100%; overflow: hidden; border-radius: 10px; touch-action: pan-y; }
.main-banner-track { display: flex; transition: transform .28s ease; will-change: transform; }
.main-banner-slide {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 0 0 100%;
  gap: 10px;
  min-width: 0;
  min-height: 105px;
  padding: 8px 11px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(100deg, #402b14, #241a0e);
  color: #f3e6c2;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.main-banner-slide:focus-visible,
.main-banner-arrow:focus-visible,
.main-banner-dots button:focus-visible { outline: 2px solid #ffe28a; outline-offset: -2px; }
.main-banner-slide.is-default { min-height: 82px; }
.main-banner-slide.is-store { background: linear-gradient(100deg, #453142, #30263b); }
.main-banner-slide.is-notice { background: linear-gradient(100deg, #5a351f, #302119); }
.main-banner-slide .next-game-copy { display: block; }
.main-banner-slide .next-game-kicker,
.main-banner-slide .next-game-title,
.main-banner-slide .next-game-meta { display: block; }
.main-banner-slide .next-game-kicker { display: flex; }
.main-banner-slide .next-game-title { line-height: 1.3; }
.main-banner-slide .next-game-cta { display: inline-flex; align-items: center; white-space: nowrap; }
.main-banner-slide.is-store .next-game-cta { background: #ead4ed; color: #44274c; box-shadow: 0 2px 0 #86648c; }
.main-banner-slide.is-notice .next-game-cta { background: #ffdda5; color: #663918; box-shadow: 0 2px 0 #a56e40; }
.main-banner-slide.is-store .next-game-title { color: #f5ddff; }
.main-banner-slide.is-notice .next-game-title { color: #ffe0a6; }
.main-banner-slide .next-game-mascot { flex-basis: 70px; width: 70px; height: 70px; }
.main-banner-image,
.main-banner-placeholder {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border: 2px solid #b58b64;
  border-radius: 11px;
  background: #211b1a;
}
.main-banner-image img { width: 100%; height: 100%; object-fit: contain; }
.main-banner-image-fallback { display: none; font-size: 28px; }
.main-banner-image.is-failed img { display: none; }
.main-banner-image.is-failed .main-banner-image-fallback { display: block; }
.main-banner-placeholder { font-size: 30px; }
.main-banner-kind { color: #ffdda4; }
.main-banner-store { overflow: hidden; text-overflow: ellipsis; color: #e5cbdd; }
.main-banner-controls { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 23px; }
.main-banner-arrow { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: #f6d58d; font-size: 20px; line-height: 28px; cursor: pointer; }
.main-banner-dots { display: flex; align-items: center; gap: 1px; }
.main-banner-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.main-banner-dots button::after { content: ""; display: block; width: 7px; height: 7px; border-radius: 99px; background: #82705b; }
.main-banner-dots button[aria-current="true"]::after { width: 17px; background: #ffd56d; }
.main-banner-progress { display: block; width: min(32vw, 120px); height: 6px; overflow: hidden; border-radius: 99px; background: #6b594b; }
.main-banner-progress i { display: block; height: 100%; border-radius: inherit; background: #ffd56d; transition: width .28s ease; }
.main-banner-count { min-width: 28px; color: #d6c3a3; font: 10px/1 'Jua', sans-serif; text-align: center; }
@media (max-width: 390px) {
  .main-banner-slide { gap: 7px; padding-inline: 7px; }
  .main-banner-slide .next-game-mascot { flex-basis: 56px; width: 56px; height: 56px; }
  .main-banner-image,
  .main-banner-placeholder { flex-basis: 76px; width: 76px; height: 82px; }
  .main-banner-slide.is-store .next-game-cta,
  .main-banner-slide.is-notice .next-game-cta { display: none; }
  .main-banner-slide .next-game-cta { padding: 7px 8px; font-size: 11px; }
  .main-banner-slide .next-game-title { font-size: 13px; }
}
/* Full-width notice artwork keeps its complete 3:1 composition at every screen size. */
.main-banner-slide.is-illustrated-notice {
  display: block;
  position: relative;
  align-self: center;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.main-banner-slide.is-illustrated-notice .main-banner-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  border: 0;
  border-radius: inherit;
  background: transparent;
}
.main-banner-slide.is-illustrated-notice .main-banner-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}
.main-banner-slide.is-illustrated-notice .next-game-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.main-banner-slide.is-illustrated-notice .next-game-cta { display: none; }
/* A shorter lobby hero leaves room for the tournament list. Every slide uses
   one height so inactive posters cannot enlarge the carousel between slides. */
body.holdem-lobby-active #modeSwitch { padding: 3px !important; }
body.holdem-lobby-active #modeSwitch #lobbyNextGame { padding: 0; }
body.holdem-lobby-active #modeSwitch .main-banner-track { height: 88px; }
body.holdem-lobby-active #modeSwitch .main-banner-slide {
  height: 88px;
  min-height: 0;
  padding-block: 6px;
}
body.holdem-lobby-active #modeSwitch .main-banner-image,
body.holdem-lobby-active #modeSwitch .main-banner-placeholder {
  flex-basis: 76px;
  width: 76px;
  height: 76px;
}
body.holdem-lobby-active #modeSwitch .main-banner-slide.is-illustrated-notice {
  display: flex;
  justify-content: center;
  padding: 0;
}
body.holdem-lobby-active #modeSwitch .is-illustrated-notice .main-banner-image {
  flex: 0 1 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 3 / 1;
}
body.holdem-lobby-active #modeSwitch .is-illustrated-notice .main-banner-image img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) { .main-banner-track, .main-banner-progress i { transition: none; } }

/* Recently added lobby panels follow the same surface tone. */
.board-tabs button:not(.is-active),
.board-secondary,
.se-filter:not(.is-active),
.se-secondary,
.se-small-secondary,
#communityMenuRoot .mp-filter button:not(.is-active),
.support-ui-tabs button:not(.is-active),
.support-ui-status-controls button:not(:disabled) {
  background: var(--cocoa-raised);
  color: var(--cocoa-muted);
}
.board-list,
.board-detail,
.support-ui-list,
.support-ui-thread-head,
#communityMenuRoot .mp-inbox-list {
  background: var(--cocoa-panel);
}
.board-root select,
.board-form input,
.board-form textarea,
.board-comment-form textarea,
.se-root input,
.se-root select,
.se-root textarea,
.support-ui-form input,
.support-ui-form textarea,
.support-ui-reply textarea,
#communityMenuRoot .mp-field input,
#communityMenuRoot .mp-field select,
#communityMenuRoot .mp-field textarea {
  background: var(--cocoa-input);
  color: var(--cocoa-text);
}
.se-event-card,
.se-detail,
.se-scoreboard:not(.is-tv),
.se-form,
.se-images-panel,
.se-apply-dialog {
  background: var(--cocoa-panel);
}
.se-empty,
.se-level-table,
.se-level-edit,
.se-image-card {
  background: var(--cocoa-raised);
}
.se-list-head small,
.se-form-note,
.se-form-level-head small,
.se-event-copy > span,
.se-detail-time,
.se-board-note,
.board-row time,
.board-detail-meta time,
.board-comment-meta time,
.support-ui-row time,
.support-ui-thread-head time,
.support-ui-message time,
.support-ui-hint,
#communityMenuRoot .mp-list-heading small,
#communityMenuRoot .mp-footnote {
  color: var(--cocoa-muted);
}
.support-ui-panel,
.op-center-card {
  background: var(--cocoa-page);
  color: var(--cocoa-text);
}
.support-ui-header,
.op-center-card > header {
  background: linear-gradient(180deg, var(--cocoa-raised), var(--cocoa-panel));
}
.support-ui-message,
.support-ui-message.is-mine,
.op-center-intro,
.op-center-links a,
.op-center-actions button.secondary {
  background: var(--cocoa-raised);
}
.op-center-form input {
  background: var(--cocoa-input);
  color: var(--cocoa-text);
}
#communityMenuRoot .mp-room-card,
#communityMenuRoot .mp-detail.is-social-game,
#communityMenuRoot .mp-invitation {
  background: var(--cocoa-raised) !important;
  border-color: var(--cocoa-border) !important;
}

/* Board photo attachments (board.css hardcodes the amber-dark surface; follow the cocoa panels). */
.board-image-chip,
.board-post-image,
.board-row-thumb { background: var(--cocoa-panel); }
.board-form .board-image-add { background: var(--cocoa-raised); color: var(--cocoa-muted); }

/* Notice contact links use the existing message screen without leaving the lobby. */
.lobby-notice-detail-body .lobby-notice-message-action {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin: 16px 0 4px;
  padding: 14px 18px;
  border: 1px solid #f7d18e;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffe7b8, #f5c46f);
  color: #4b2c12;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.lobby-notice-detail-body .lobby-notice-message-action:hover {
  background: linear-gradient(135deg, #fff0ce, #ffd28a);
}
.lobby-notice-detail-body .lobby-notice-message-action:focus-visible {
  outline: 3px solid #ffe7b8;
  outline-offset: 4px;
}