:root {
  --mp-bg: #0c2b21;
  --mp-header: #09241b;
  --mp-panel: #0c2c22;
  --mp-panel-strong: #103629;
  --mp-lobby-card: #071f18;
  --mp-field: #071f18;
  --mp-line: rgba(232, 196, 121, .3);
  --mp-line-soft: rgba(232, 196, 121, .16);
  --mp-text: #f3ead7;
  --mp-muted: #c8bea9;
  --mp-dim: #9f998a;
  --mp-gold: #e8c477;
  --mp-gold-deep: #bf9140;
  --mp-success: #86b89a;
  --mp-danger: #d08b81;
  --account-form-max: 440px;
  --account-card-padding: 26px;
  --account-control-height: 46px;
  --account-radius: 12px;
  --account-control-radius: 8px;
  --account-surface: #08231a;
  --account-surface-soft: #0a291f;
  --account-field: #061c15;
  --account-border: rgba(232, 196, 121, .2);
  --account-border-strong: rgba(232, 196, 121, .38);
  --account-gold: #d9b565;
  --account-gold-hover: #e5c578;
}

body[data-page="multiplayer"] {
  overflow: auto;
  background: var(--mp-bg);
  color: var(--mp-text);
}
.multiplayer-app[hidden], .multiplayer-app [hidden] { display: none !important; }
.multiplayer-app { min-height: 100vh; display: flex; flex-direction: column; }
.multiplayer-app:not(.is-game-mode) { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-size: 1rem; line-height: 1.65; }
.mp-header { min-height: 82px; border-bottom: 1px solid var(--mp-line-soft); background: rgba(4, 20, 15, 0.96); }
.mp-header-inner { width: min(100% - 40px, 1160px); min-height: 82px; margin: 0 auto; padding: 7px 0; display: flex; align-items: center; gap: 24px; }
.mp-header-brand, .mp-mobile-menu { display: none; }
.mp-header-brand { flex-shrink: 0; align-items: center; color: var(--mp-text); text-decoration: none; }
.mp-header-brand span { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.mp-header-brand strong { color: var(--mp-gold); font-size: 1.28em; }
.mp-header-brand:focus-visible { border-radius: 3px; outline: 3px solid #f4d691; outline-offset: 4px; }
.mp-back-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.mp-back-links a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 3px; color: #d5cbb4; font-size: .94rem; font-weight: 700; text-decoration: none; }
.mp-back-links a:hover { color: #fff4d8; }
.mp-back-links a:focus-visible { outline: 3px solid #f4d691; outline-offset: 4px; }
.mp-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mp-account-menu { position: relative; }
.mp-account-menu summary { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 6px; border: 1px solid transparent; border-radius: 9px; color: var(--mp-text); font-size: .94rem; cursor: pointer; list-style: none; }
.mp-account-menu summary::-webkit-details-marker { display: none; }
.mp-account-menu summary:hover, .mp-account-menu[open] summary { border-color: var(--mp-line-soft); background: #0c3024; }
.mp-account-menu summary:focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 2px; }
.mp-user-avatar { width: 28px; height: 28px; display: block; border-radius: 50%; background: #315545; object-fit: cover; overflow: hidden; }
.mp-account-name { color: #efdfbd; font-weight: 700; }
.mp-account-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 220px; padding: 10px; border: 1px solid var(--mp-line); border-radius: 11px; background: #0b291f; box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.mp-account-popover p { margin: 0 4px 8px; padding-bottom: 9px; border-bottom: 1px solid var(--mp-line-soft); }
.mp-account-popover p span, .mp-account-popover p strong { display: block; }
.mp-account-popover p span { margin-bottom: 2px; color: var(--mp-dim); font-size: .72rem; }
.mp-account-popover p strong { color: #f0ddb1; font-size: .92rem; }
.mp-menu-action { display: block; box-sizing: border-box; width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--mp-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.mp-menu-action[hidden] { display: none !important; }
.mp-menu-action:hover { background: #12382b; }
.mp-menu-action:focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 1px; }
.mp-menu-divider { height: 0; margin: 8px 4px; border: 0; border-top: 1px solid var(--mp-line-soft); }
.mp-menu-danger { color: #e3aaa2; }
.mp-main { width: min(1240px, 100%); flex: 1 0 auto; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; }
.mp-screen { width: 100%; }
.mp-screen:not([hidden]) { margin-block: auto; }
.mp-screen[hidden] { display: none; }
.mp-intro { max-width: 720px; margin: 0 auto 24px; text-align: center; }
.mp-intro h1, .mp-section-heading h1 { margin: 4px 0 8px; color: #f7e7c1; font-family: var(--font-head); }
.mp-intro p { margin: 0; color: var(--mp-muted); line-height: 1.6; }
.mp-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, var(--account-form-max))); align-items: start; justify-content: center; gap: 22px; max-width: 902px; margin: 0 auto; }
.mp-auth-notice { max-width: 900px; margin: 0 auto 18px; padding: 12px 14px; border: 1px solid rgba(217,181,101,.42); border-radius: 9px; color: #eadfca; background: #0a291f; }
.mp-auth-notice.is-error { border-color: rgba(213,154,145,.62); color: #efc1ba; background: #321d1a; }
.mp-auth-help { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.mp-auth-help a, .mp-auth-help button { padding: 0; border: 0; color: #d9c28e; background: transparent; font: 700 .82rem/1.4 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mp-auth-help a:hover, .mp-auth-help button:hover { color: #f1dfb9; }
.mp-resend-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mp-line-soft); }
.mp-resend-form[hidden] { display: none; }
.mp-panel { padding: 20px; border: 1px solid var(--mp-line-soft); border-radius: 14px; background: var(--mp-panel); }
.mp-panel h2 { margin: 0 0 16px; color: #f6e2b5; font-family: var(--font-head); }
.mp-panel label { display: block; margin: 12px 0 5px; color: #e3d6bd; font-weight: 700; }
.mp-panel input, .mp-panel select, .mp-compact-form input, .mp-compact-form select { width: 100%; min-height: 42px; padding: 8px 11px; border: 1px solid rgba(232, 196, 121, .34); border-radius: 8px; background: var(--mp-field); color: #fff4dd; font: inherit; }
.mp-panel input:focus, .mp-panel select:focus, .mp-compact-form input:focus, .mp-compact-form select:focus { border-color: var(--mp-gold); outline: 2px solid rgba(232,196,119,.2); outline-offset: 1px; }
.mp-panel input.is-nickname-available { border-color: #669575; box-shadow: 0 0 0 1px rgba(102,149,117,.18); }
.mp-panel input.is-nickname-available:focus { outline-color: rgba(102,149,117,.34); }
.mp-panel input.is-nickname-unavailable { border-color: #c5786d; box-shadow: 0 0 0 1px rgba(197,120,109,.18); }
.mp-panel input.is-nickname-unavailable:focus { outline-color: rgba(197,120,109,.34); }
.mp-panel input::placeholder, .mp-compact-form input::placeholder { color: #8d958a; }
.mp-panel input:-webkit-autofill, .mp-compact-form input:-webkit-autofill { box-shadow: 0 0 0 1000px var(--mp-field) inset; -webkit-text-fill-color: #fff4dd; caret-color: #fff4dd; }
.mp-panel > .ui-button, .mp-panel form > .ui-button { margin-top: 16px; }
#auth-screen .mp-auth-intro { max-width: 640px; margin-bottom: 24px; }
#auth-screen .mp-auth-intro h1 { margin: 0 0 8px; font-size: clamp(1.9rem, 3vw, 2.25rem); line-height: 1.12; }
#auth-screen .mp-auth-grid { align-items: start; }
#auth-screen .mp-panel { padding: var(--account-card-padding); border-color: var(--account-border); border-radius: var(--account-radius); background: var(--account-surface); }
#auth-screen .mp-panel h2 { margin: 0 0 18px; font-size: 1.35rem; line-height: 1.25; }
#auth-screen .mp-auth-form { min-width: 0; }
#auth-screen .mp-auth-fields { display: grid; gap: 16px; }
#auth-screen .mp-field label { margin: 0 0 6px; color: #ded2b8; font-size: .9rem; line-height: 1.4; }
#auth-screen .mp-field input { min-height: var(--account-control-height); padding: 9px 12px; border-color: var(--account-border-strong); border-radius: var(--account-control-radius); background: var(--account-field); }
#auth-screen .mp-field input:hover { border-color: rgba(232, 196, 121, .55); }
#auth-screen .mp-field input:focus { border-color: var(--account-gold); outline-color: rgba(217, 181, 101, .2); }
#auth-screen .mp-field-hint { margin: 6px 0 0; color: var(--mp-dim); font-size: .78rem; line-height: 1.4; }
#auth-screen .mp-auth-form > .ui-button { width: auto; min-height: var(--account-control-height); margin-top: 18px; padding: 10px 20px; border-color: var(--account-border-strong); border-radius: var(--account-control-radius); color: #f3e7cb; background: var(--account-surface-soft); box-shadow: none; font-size: .94rem; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
#auth-screen .mp-auth-form > .ui-button.primary { border-color: var(--account-gold); color: #241803; background: var(--account-gold); box-shadow: none; }
#auth-screen .mp-auth-form > .ui-button:hover:not(:disabled) { border-color: rgba(232, 196, 121, .62); background: #103429; filter: none; transform: none; }
#auth-screen .mp-auth-form > .ui-button.primary:hover:not(:disabled) { border-color: var(--account-gold-hover); background: var(--account-gold-hover); }
#auth-screen .mp-auth-form > .ui-button:active:not(:disabled) { transform: none; }
#auth-screen .mp-auth-help { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--account-border); }
#auth-screen .mp-resend-form { margin-top: 16px; padding-top: 16px; }
#auth-screen .mp-form-feedback { margin-top: 14px; white-space: pre-line; }
.mp-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.mp-section-heading p, .mp-section-heading h1 { margin-bottom: 0; }
.mp-section-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.mp-lobby-intro { margin-bottom: 34px; }
.mp-lobby-intro h1 { margin: 0 0 22px; color: #f5ecdb; font-family: var(--font-head); font-size: clamp(2rem, 2.7vw, 2.8rem); letter-spacing: -.025em; line-height: 1.08; }
.mp-lobby-intro .mp-section-heading { margin-bottom: 14px; }
.mp-lobby-intro .mp-section-heading h1 { margin: 0; }
.mp-lobby-intro > p:last-child { max-width: 680px; margin: 0; color: #d5cbb4; font-size: 1.04rem; line-height: 1.65; }
.mp-lobby-layout { display: grid; grid-template-columns: minmax(0, 2.08fr) minmax(330px, .92fr); gap: 20px; align-items: start; }
.mp-public-tables { min-height: 470px; overflow: hidden; border: 1px solid var(--mp-line-soft); border-radius: 14px; background: var(--mp-lobby-card); }
.mp-list-header { min-height: 82px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--mp-line-soft); }
.mp-title-line { display: flex; align-items: center; gap: 10px; }
.mp-title-line h2 { margin: 0; color: #f5ecdb; font-family: var(--font-head); font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -.02em; line-height: 1.16; }
.mp-table-columns, .mp-table-entry { grid-template-columns: minmax(230px, 1.55fr) minmax(140px, .9fr) minmax(115px, .7fr) minmax(115px, .65fr); }
.mp-table-columns { display: grid; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--mp-line-soft); color: #b8b09d; font-size: .76rem; font-weight: 800; letter-spacing: .16em; line-height: 1.5; text-align: center; text-transform: uppercase; }
.mp-table-columns[hidden] { display: none; }
.mp-table-list { display: grid; }
.mp-table-entry { min-height: 68px; display: grid; gap: 14px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--mp-line-soft); }
.mp-table-entry > * { justify-self: center; text-align: center; }
.mp-table-entry:last-child { border-bottom: 0; }
.mp-table-entry:hover { background: #103126; }
.mp-table-identity { box-sizing: border-box; position: relative; width: 100%; min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; padding-inline: 51px; }
.mp-table-owner-avatar { position: absolute; left: 0; width: 40px; height: 40px; display: block; border: 1px solid rgba(232,196,121,.24); border-radius: 50%; background: #405e4f; object-fit: cover; overflow: hidden; }
.mp-table-name { width: 100%; min-width: 0; text-align: center; }
.mp-table-name strong, .mp-table-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-table-name strong { color: #f5ecdb; font-size: 1rem; line-height: 1.18; }
.mp-table-name small { margin-top: 1px; color: #b8b09d; font-size: .88rem; line-height: 1.22; }
.mp-table-players { color: #d5cbb4; font-size: .94rem; }
.mp-table-status { width: 100%; color: #c9dacb; font-size: .9rem; line-height: 1.35; text-align: center; }
.mp-table-status.is-playing { color: #e2c890; }
.mp-table-status.is-finished { color: #c4cbbd; }
.mp-table-entry .ui-button { min-width: 114px; justify-self: center; }
.mp-empty-state { min-height: 355px; padding: 42px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mp-empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: #15392c; color: var(--mp-gold); }
.mp-empty-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.mp-empty-state h3 { margin: 0 0 9px; color: #f5ecdb; font-family: var(--font-head); font-size: 1.28rem; line-height: 1.16; }
.mp-empty-state p { max-width: 390px; margin: 0 0 18px; color: #d5cbb4; font-size: 1rem; line-height: 1.65; }
.mp-lobby-side { display: grid; gap: 14px; }
.mp-friend-invites { padding: 17px 18px; border: 1px solid var(--mp-line-soft); border-radius: 12px; background: var(--mp-lobby-card); }
.mp-friend-invites--waiting { margin-top: 14px; padding: 15px 0 0; border-width: 1px 0 0; border-radius: 0; background: transparent; }
.mp-friend-invites-status { margin: 0; color: var(--mp-dim); font-size: .86rem; line-height: 1.45; }
.mp-friend-invites-list { display: grid; gap: 9px; margin-top: 12px; }
.mp-friend-invite-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid rgba(207, 176, 107, .22); border-radius: 10px; background: rgba(0, 0, 0, .12); }
.mp-friend-invite-avatar { width: 34px; height: 34px; border: 1px solid rgba(207, 176, 107, .35); border-radius: 50%; object-fit: cover; }
.mp-friend-invite-copy { min-width: 0; }
.mp-friend-invite-copy strong { display: block; overflow: hidden; color: #f5ecdb; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.mp-friend-invite-copy span { display: block; margin-top: 2px; color: var(--mp-dim); font-size: .72rem; line-height: 1.35; }
.mp-friend-invite-row .ui-button { min-height: 34px; padding: 7px 10px; font-size: .76rem; }
.mp-friend-invite-row.is-hidden-status { border-color: rgba(207, 176, 107, .38); }
.mp-create-card { padding: 20px; border: 1px solid var(--mp-line-soft); border-radius: 14px; background: var(--mp-lobby-card); }
.mp-side-heading { margin-bottom: 17px; }
.mp-side-heading h2, .mp-private-entry h2 { margin: 0; color: #f5ecdb; font-family: var(--font-head); font-size: 1.28rem; letter-spacing: -.02em; line-height: 1.16; }
.mp-compact-form { display: grid; gap: 12px; }
.mp-field label { display: block; margin: 0 0 5px; color: #d5cbb4; font-size: .94rem; font-weight: 700; }
.mp-field label span { color: var(--mp-dim); font-weight: 400; }
.mp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mp-submit-button { width: 100%; margin-top: 3px; }
.mp-private-entry { padding: 16px 18px; border: 1px solid var(--mp-line-soft); border-radius: 12px; background: var(--mp-lobby-card); }
.mp-private-entry .ui-button { width: 100%; margin-top: 13px; }
.multiplayer-app:not(.is-game-mode) .mp-main .ui-button, .mp-dialog .ui-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 11px 21px; border: 1px solid rgba(234, 199, 124, .58); border-radius: 10px; color: #f6e6c2; background: rgba(12, 43, 31, .8); box-shadow: none; font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-size: .98rem; font-weight: 800; letter-spacing: normal; line-height: 1.3; text-align: center; transition: transform .15s ease, filter .15s ease, background .15s ease; }
.multiplayer-app:not(.is-game-mode) .mp-main .ui-button:hover:not(:disabled), .mp-dialog .ui-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.multiplayer-app:not(.is-game-mode) .mp-main .ui-button:active:not(:disabled), .mp-dialog .ui-button:active:not(:disabled) { transform: translateY(1px); }
.multiplayer-app:not(.is-game-mode) .mp-main .ui-button.primary, .mp-dialog .ui-button.primary { border-color: #efcc83; color: #241803; background: linear-gradient(#f6dda0, #d2a151); box-shadow: 0 8px 20px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.55); }
.multiplayer-app:not(.is-game-mode) .mp-main .ui-button:focus-visible, .mp-dialog .ui-button:focus-visible { outline: 3px solid #f4d691; outline-offset: 4px; }
.mp-danger { color: var(--mp-danger); border-color: rgba(208, 139, 129, .5); }
.mp-dialog .ui-button.mp-danger { color: #fff4e5; border-color: rgba(255,162,146,.45); background: linear-gradient(180deg, var(--danger-1), var(--danger-2)); box-shadow: 0 7px 13px rgba(0,0,0,.34), 0 0 0 1px rgba(216,68,74,.2); }
.mp-dialog .ui-button.mp-danger:hover:not(:disabled) { filter: brightness(1.08); }
.mp-waiting-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; }
.mp-table-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mp-table-facts span { padding: 5px 9px; border-radius: 999px; background: #071f18; color: var(--mp-muted); }
.mp-participants-panel { overflow: hidden; }
.mp-player-list { height: 272px; display: grid; grid-template-rows: repeat(4, 62px); align-content: start; gap: 8px; overflow: hidden; }
.mp-player-entry { min-width: 0; height: 62px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(232, 196, 121, .2); border-radius: 9px; background: #0a291f; }
.mp-player-entry > div { min-width: 0; }
.mp-player-entry strong, .mp-player-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-player-entry .mp-report-button { justify-self: end; }
.mp-player-avatar { width: 38px; height: 38px; display: block; border-radius: 50%; background: #405e4f; object-fit: cover; overflow: hidden; }
.mp-player-meta { color: var(--mp-muted); font-size: .82rem; }
.mp-player-entry .mp-player-meta { color: #d7c49b; }
.mp-profile-trigger { cursor: pointer; }
.mp-profile-trigger:hover { filter: brightness(1.1); }
.mp-profile-trigger:focus-visible { outline: 2px solid #f4d691; outline-offset: 2px; }
.mp-player-entry div.mp-profile-trigger, .mp-table-name .mp-profile-trigger { border-radius: 5px; }
.mp-game-board .mp-profile-trigger { position: relative; z-index: 1; }
.sw31-presence { display: inline-flex; align-items: center; gap: 6px; margin: 5px 0 0; color: #bcb8ab; font-size: .8rem; font-weight: 700; }
.sw31-presence[hidden], .sw31-admin-visibility[hidden] { display: none !important; }
.sw31-presence-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #7e8780; }
.sw31-presence.is-online { color: #bfe0c5; }
.sw31-presence.is-online .sw31-presence-dot { background: #65ad75; }
.sw31-presence.is-offline .sw31-presence-dot { background: #7e8780; }
.sw31-admin-visibility { margin: 7px 0 0; color: #d7bb82; font-size: .72rem; font-weight: 700; }
.mp-ready { color: #b8d5b8; }
.mp-not-ready, .mp-disconnected { color: #deb19f; }
.mp-waiting-actions { display: flex; flex-direction: column; align-items: stretch; }

.mp-dialog { width: min(500px, calc(100vw - 48px)); max-width: none; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--mp-text); }
.mp-dialog::backdrop { background: rgba(3, 12, 9, .72); }
.mp-dialog-surface { padding: 22px; border: 1px solid var(--mp-line); border-radius: 14px; background: #0c2c22; box-shadow: 0 18px 42px rgba(0,0,0,.4); }
.mp-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mp-dialog-header .menu-kicker { justify-content: flex-start; margin: 0 0 3px; }
.mp-dialog-header h2 { margin: 0; color: #f5e1b5; font-family: var(--font-head); font-size: 1.48rem; }
.mp-dialog-close { width: 36px; height: 36px; display: grid; place-items: center; padding: 0 0 3px; border: 1px solid var(--mp-line-soft); border-radius: 8px; background: #15382b; color: var(--mp-muted); font: 400 1.55rem/1 var(--font-ui); cursor: pointer; }
.mp-dialog-close:hover { border-color: var(--mp-line); color: var(--mp-text); }
.mp-dialog-close:focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 2px; }
.mp-dialog-copy { margin: 13px 0 18px; color: var(--mp-muted); font-size: .88rem; line-height: 1.55; }
.mp-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }
.mp-dialog textarea { box-sizing: border-box; width: 100%; min-height: 112px; max-height: 190px; padding: 10px 11px; border: 1px solid rgba(232,196,121,.34); border-radius: 8px; background: var(--mp-field); color: #fff4dd; caret-color: #fff4dd; font: inherit; line-height: 1.45; resize: vertical; }
.mp-dialog textarea::placeholder { color: #8d958a; }
.mp-dialog textarea:focus { border-color: var(--mp-gold); outline: 2px solid rgba(232,196,119,.2); outline-offset: 1px; }
.social-confirm-dialog { width: min(500px, calc(100vw - 32px)); }
.social-confirm-dialog .mp-dialog-surface { padding: 22px; border-color: rgba(232,196,121,.32); background: #0c2c22; box-shadow: 0 16px 36px rgba(0,0,0,.38); }
.social-confirm-copy { margin-bottom: 21px; color: #d3c8b3; font-size: .92rem; }
.social-confirm-dialog .ui-button { min-height: 44px; padding: 9px 15px; border-radius: 8px; background: #12362a; box-shadow: none; transition: border-color .15s ease, background .15s ease; }
.social-confirm-dialog .ui-button:hover:not(:disabled), .social-confirm-dialog .ui-button:active:not(:disabled) { transform: none; filter: none; border-color: rgba(232,196,121,.72); background: #183f31; }
.social-confirm-dialog .ui-button.social-confirm-danger { border-color: rgba(214,139,125,.48); background: #3a2420; color: #f2cbc3; box-shadow: none; }
.social-confirm-dialog .ui-button.social-confirm-danger:hover:not(:disabled) { border-color: rgba(224,157,144,.72); background: #472a25; }
.social-confirm-dialog .ui-button:disabled { opacity: .56; cursor: wait; }
.mp-report-dialog { width: min(540px, calc(100vw - 48px)); }
.mp-profile-dialog { width: min(510px, calc(100vw - 32px)); }
.mp-profile-dialog [hidden] { display: none !important; }
.mp-profile-dialog-heading { min-width: 0; display: flex; align-items: center; gap: 13px; }
.mp-profile-dialog-heading > div { min-width: 0; }
.mp-profile-dialog-heading h2 { overflow-wrap: anywhere; }
.mp-profile-dialog-name-line { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mp-profile-dialog-avatar { width: 60px; height: 60px; flex: 0 0 auto; display: block; border: 1px solid rgba(232,196,121,.38); border-radius: 10px; background: #405e4f; object-fit: cover; }
.mp-profile-dialog-rank { margin: 3px 0 0; color: #d7c49b; font-size: .84rem; font-weight: 700; }
.mp-profile-dialog-registered { margin: 13px 0 0; padding-top: 11px; border-top: 1px solid var(--mp-line-soft); color: #bdb5a4; font-size: .82rem; }
.mp-profile-dialog-dates { display: flex; flex-wrap: wrap; gap: 0 18px; }
.mp-profile-dialog-dates .mp-profile-dialog-registered { flex: 1 1 190px; }
.mp-profile-dialog-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 14px 0 0; }
.mp-profile-dialog-stats div { padding: 9px 7px; border: 1px solid rgba(232,196,121,.16); border-radius: 8px; background: #08251c; text-align: center; }
.mp-profile-dialog-stats dt { color: #bdb39e; font-size: .72rem; }
.mp-profile-dialog-stats dd { margin: 2px 0 0; color: #f0ddb1; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mp-profile-dialog-private { margin-top: 14px; padding: 13px; border: 1px solid rgba(232,196,121,.16); border-radius: 8px; background: #08251c; }
.mp-profile-dialog-private strong { color: #ded1b9; }
.mp-profile-dialog-private p { margin: 3px 0 0; color: #b8b09f; font-size: .84rem; line-height: 1.45; }
.mp-profile-dialog-owner-note { margin: 9px 0 0; color: #d9bd83; font-size: .76rem; font-weight: 700; text-align: right; }
.mp-profile-dialog-link { display: inline-flex; margin-top: 16px; color: #e5c178; font-size: .88rem; font-weight: 800; text-underline-offset: 3px; }
.mp-profile-dialog-link:hover { color: #f1d494; }
.mp-profile-dialog-link:focus-visible { outline: 2px solid #f4d691; outline-offset: 3px; }
.mp-profile-social-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mp-line-soft); }
.mp-profile-social-actions .social-status { flex-basis: 100%; color: #d8c7a4; font-size: .78rem; }
.mp-profile-social-actions .social-button { min-height: 34px; padding: 6px 9px; border: 1px solid rgba(232,196,121,.34); border-radius: 7px; background: #15382b; color: #f0ddb1; font: 700 .76rem/1.2 var(--font-ui); cursor: pointer; }
.mp-profile-social-actions .social-button:hover { border-color: rgba(232,196,121,.68); background: #1a4334; }
.mp-profile-social-actions .social-button--primary { background: #6e5525; color: #fff0ca; }
.mp-profile-social-actions .social-button--danger { border-color: rgba(214,139,125,.4); background: #3a2420; color: #edc1b8; }
.mp-profile-social-actions .social-button:disabled { opacity: .55; cursor: wait; }
.mp-profile-social-actions .social-button:focus-visible { outline: 2px solid #f4d691; outline-offset: 2px; }
.mp-leave-dialog { width: min(470px, calc(100vw - 48px)); }
.mp-leave-warning { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 13px; margin: 17px 0 20px; padding: 14px; border: 1px solid rgba(224,168,102,.24); border-radius: 10px; background: rgba(76,49,20,.22); }
.mp-leave-warning p { margin: 0; color: #ded2bc; font-size: .9rem; line-height: 1.55; }
.mp-leave-warning-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(178,104,54,.2); color: #efc77b; }
.mp-leave-warning-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.mp-chat { position: fixed; right: 24px; bottom: 24px; z-index: 24; width: min(350px, calc(100vw - 48px)); overflow: hidden; border: 1px solid rgba(232,196,121,.45); border-radius: 13px; background: rgba(5,27,20,.97); box-shadow: 0 18px 42px rgba(0,0,0,.42); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.mp-chat[hidden] { display: none; }
.mp-chat-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 15px; border-bottom: 1px solid rgba(232,196,121,.2); cursor: grab; touch-action: none; user-select: none; }
.mp-chat.is-dragging { transition: none; }
.mp-chat.is-dragging .mp-chat-header { cursor: grabbing; }
.mp-chat-heading { min-width: 0; display: flex; align-items: center; gap: 9px; }
.mp-chat-header h2 { margin: 0; color: #f5e1b5; font-family: var(--font-head); font-size: 1.08rem; }
.mp-chat-header button { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--mp-line-soft); border-radius: 8px; background: #15382b; color: #f3ddb0; font: 700 1.2rem/1 var(--font-ui); cursor: pointer; }
.mp-chat-header button:focus-visible { outline: 2px solid var(--mp-gold); outline-offset: 2px; }
.mp-chat-unread-badge { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 3px 7px; border-radius: 999px; background: #efc565; color: #241803; font: 800 .72rem/1 var(--font-ui); white-space: nowrap; }
.mp-chat-unread-badge[hidden] { display: none; }
.mp-chat-content { display: grid; }
.mp-chat-messages { box-sizing: border-box; height: clamp(145px, 24vh, 240px); min-height: 0; max-height: none; margin: 0; padding: 10px 12px; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-color: #6b5a31 #09251c; }
.mp-chat-message { padding: 7px 5px; border-bottom: 1px solid rgba(232,196,121,.1); }
.mp-chat-message:last-child { border-bottom: 0; }
.mp-chat-message-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mp-chat-message strong { min-width: 0; overflow: hidden; color: #f2dca9; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.mp-chat-message time { flex: 0 0 auto; color: #918a7c; font-size: .69rem; }
.mp-chat-message p { margin: 3px 0 0; overflow-wrap: anywhere; color: #e8e0cf; font-size: .86rem; line-height: 1.42; white-space: pre-wrap; }
.mp-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; border-top: 1px solid rgba(232,196,121,.2); }
.mp-chat-form input { min-width: 0; height: 40px; padding: 8px 10px; }
.mp-chat-form .ui-button { min-height: 40px !important; padding: 7px 13px !important; font-size: .82rem !important; }
.mp-chat.is-collapsed { width: min(170px, calc(100vw - 48px)); }
.mp-chat.is-collapsed .mp-chat-content { display: none; }
.mp-chat.is-collapsed .mp-chat-header { border-bottom: 0; cursor: grab; }
.mp-chat.is-collapsed.mp-chat-unread { border-color: #f0c45f; background: rgba(38,34,17,.98); }
.mp-chat.is-collapsed.mp-chat-unread .mp-chat-header button { border-color: #f1cf80; background: #efc565; color: #241803; }
.mp-report-button { min-height: 30px; padding: 5px 9px; border: 1px solid rgba(221,172,158,.4); border-radius: 7px; background: rgba(81,31,29,.35); color: #e8bdb4; font: 700 .74rem/1 var(--font-ui); cursor: pointer; }
.mp-report-button:hover { border-color: rgba(221,172,158,.72); background: rgba(101,38,35,.52); }
.mp-game-board .seat-label { width: max-content; max-width: min(390px, 92vw); isolation: isolate; }
.mp-game-board .player-head { max-width: min(320px, calc(100vw - 96px)); padding-inline: 8px; }
.mp-game-board .player-head.has-report-action { width: fit-content; max-width: min(268px, calc(100vw - 96px)); display: grid; grid-template-columns: minmax(0, auto) 34px; align-items: center; column-gap: 12px; }
.mp-game-board .player-head.has-report-action .mp-player-identity { width: max-content; max-width: min(206px, calc(100vw - 158px)); align-self: center; }
.mp-game-board .player-name { text-transform: none; letter-spacing: .035em; }
.mp-player-identity { position: relative; min-width: 0; width: max-content; max-width: min(270px, calc(100vw - 136px)); display: grid; gap: 1px; cursor: help; }
.mp-player-primary { min-width: 0; display: flex; align-items: center; gap: 4px; }
.mp-player-identity .player-name { min-width: 0; display: block; flex: 1 1 auto; max-width: 100%; overflow: hidden; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.mp-player-progression { display: block; max-width: 100%; overflow: hidden; color: #d8bd82; font-size: .68rem; font-weight: 700; line-height: 1.2; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
.mp-player-identity:focus-visible { border-radius: 4px; outline: 2px solid #f4d691; outline-offset: 3px; }
.mp-player-identity:focus-visible::after { content: attr(data-full-label); position: absolute; top: calc(100% + 8px); left: 0; z-index: 12; box-sizing: border-box; width: max-content; max-width: min(300px, calc(100vw - 48px)); padding: 7px 9px; border: 1px solid rgba(232,196,121,.52); border-radius: 7px; background: #09251c; color: #f5e8ca; font: 700 .72rem/1.35 var(--font-ui); white-space: normal; }
.mp-game-board .player-head .mp-report-button--icon { position: relative; z-index: 2; width: 34px; min-width: 34px; height: 34px; min-height: 34px; place-self: center; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: rgba(235,210,167,.82); box-shadow: none; filter: none; transform: none; transition: color .15s ease, filter .15s ease; }
.mp-game-board .player-head .mp-report-button--icon svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
.mp-game-board .player-head .mp-report-button--icon span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mp-game-board .player-head .mp-report-button--icon:hover { border: 0; background: transparent; color: #ffd9d0; box-shadow: none; filter: drop-shadow(0 0 3px rgba(222,139,125,.42)); }
.mp-game-board .player-head .mp-report-button:focus-visible { border: 0; background: transparent; color: #ffe4d9; outline: 2px solid #f4d691; outline-offset: 1px; box-shadow: none; filter: drop-shadow(0 0 3px rgba(244,214,145,.42)); }
.mp-game-board .seat-left .player-coins { left: 0; right: 0; top: auto; bottom: calc(100% + var(--player-coin-offset-y)); margin-inline: auto; transform: none; }
.mp-game-board .seat-left .seat-label { align-self: flex-start; }
.mp-game-board .seat-right .seat-label { align-self: flex-end; }
.mp-game-board .seat-top .seat-label { top: 14px; left: calc(50% + (var(--card-width) * 1.5) + var(--hand-card-gap) + 16px); max-width: 320px; }
.mp-game-board .seat-top .player-avatar-wrap { width: 44px; height: 44px; }
.mp-game-board .seat-top .player-head { max-width: 268px; }
.mp-game-board .seat-top .mp-player-identity { width: max-content; max-width: 206px; }
.mp-game-board .seat-top .mp-player-progression { font-size: .64rem; }
.mp-footer { min-height: 82px; flex: 0 0 auto; display: flex; align-items: center; padding-block: 0; border-top: 1px solid rgba(227, 193, 117, .24); background: #04120e; }
.mp-footer-inner { width: min(100% - 40px, 1160px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mp-footer-inner p { margin: 0; color: #b8b09d; white-space: nowrap; }
.mp-footer-inner nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; }
.mp-footer-inner a { min-height: 32px; display: inline-flex; align-items: center; color: #d5cbb4; text-decoration: none; }
.mp-footer-inner a:hover { color: #fff4d8; }
.mp-footer-inner a:focus-visible { outline: 3px solid #f4d691; outline-offset: 4px; }

.mp-game-active { overflow: hidden !important; }
.multiplayer-app.is-game-mode { height: 100vh; min-height: 0; padding: 12px 14px; }
.multiplayer-app.is-game-mode .mp-header { display: none; }
.multiplayer-app.is-game-mode .mp-footer { display: none; }
.multiplayer-app.is-game-mode .mp-main { width: 100%; height: 100%; margin: 0; padding: 0; }
.multiplayer-app.is-game-mode .mp-chat { right: 28px; bottom: 28px; z-index: 30; }
.mp-game-screen { width: 100%; height: 100%; }
.mp-game-board { width: 100%; height: 100%; min-height: 610px; }
.mp-game-board #game-seats { display: contents; }
.mp-game-meta { position: absolute; top: 12px; left: 12px; z-index: 7; display: flex; align-items: center; gap: 8px; }
.mp-game-menu-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.mp-game-board .player-seat.mp-is-offline .seat-label { opacity: .58; filter: grayscale(.35); }
.mp-game-board .player-status[data-status="offline"] { color: #f2cbc4; border-color: rgba(208,139,129,.5); background: rgba(80,31,29,.8); }
.mp-game-board .player-status[data-status="spectating"] { color: #d8eadf; border-color: rgba(126,181,151,.38); background: rgba(20,62,44,.82); }
.mp-game-board .mp-spectator-seat .player-head { border-color: rgba(151,190,166,.34); }
.mp-game-board .mp-spectator-seat.seat-left,
.mp-game-board .mp-spectator-seat.seat-right { top: 50%; transform: translateY(-50%); }
.mp-game-board .mp-spectator-seat.seat-left .seat-label,
.mp-game-board .mp-spectator-seat.seat-right .seat-label { margin: 0; transform: none; }
.mp-game-board .mp-spectator-seat.seat-top .seat-label { top: 0; left: 50%; transform: translateX(-50%); }
.mp-game-board .mp-spectator-seat.seat-bottom { display: flex; align-items: flex-end; justify-content: center; }
.mp-game-board .mp-spectator-seat.seat-bottom .seat-label { margin: 0 0 14px; }
.mp-game-board .player-score { min-width: 0; white-space: nowrap; }
.mp-turn-clock { --turn-elapsed: 0turn; position: relative; width: 34px; height: 34px; flex: 0 0 34px; display: inline-grid; place-items: center; border-radius: 50%; background: conic-gradient(from -90deg, rgba(41,25,12,.94) var(--turn-elapsed), #efc565 0); box-shadow: 0 0 0 1px rgba(245,211,133,.48), 0 4px 10px rgba(0,0,0,.32); color: #f8e4ad; font: 800 .68rem/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.mp-turn-clock::before { content: ""; position: absolute; inset: 4px; border-radius: inherit; background: #10271f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mp-turn-clock-value { position: relative; z-index: 1; }
.mp-turn-clock.is-warning { background: conic-gradient(from -90deg, rgba(54,27,13,.96) var(--turn-elapsed), #e99c4e 0); color: #ffd5a0; }
.mp-turn-clock.is-critical { background: conic-gradient(from -90deg, rgba(59,22,20,.97) var(--turn-elapsed), #d95d55 0); color: #ffd0ca; animation: mp-turn-clock-pulse .8s ease-in-out infinite; }
.mp-turn-clock.is-paused { filter: saturate(.35); opacity: .72; animation: none; }
.mp-game-board .card:focus-visible { outline: 3px solid rgba(248,211,123,.95); outline-offset: 3px; }
.mp-game-board .card.mp-card-enter { animation: mp-card-enter 470ms cubic-bezier(.22,.61,.36,1) both; }
.mp-game-board .side-card-slot.mp-card-slot-enter { animation: mp-card-slot-enter 470ms cubic-bezier(.22,.61,.36,1) both; }
.mp-game-board .player-seat.mp-is-acting .cards { animation: mp-hand-action 480ms ease-out; }
.mp-game-board .draw-pile { transition: opacity 180ms ease, transform 180ms ease; }
.mp-game-board .mp-deal-pending { visibility: hidden !important; }
.mp-game-board .center-stage > .table-message { left: 50%; top: auto; bottom: calc(100% + 10px); z-index: 8; width: fit-content; min-width: 210px; max-width: min(420px, 40vw); padding: 5px 14px; border-color: rgba(240,198,97,.25); background: rgba(42, 34, 16, .78); font-size: .78rem; line-height: 1.3; text-wrap: balance; transform: translateX(-50%); }
.mp-flying-coin { filter: drop-shadow(0 8px 8px rgba(0,0,0,.48)); }

@keyframes mp-card-enter {
  0% { opacity: 0; transform: translateY(-18px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mp-card-slot-enter {
  0% { opacity: 0; transform: translateY(-18px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mp-hand-action {
  0%, 100% { filter: none; }
  45% { filter: drop-shadow(0 0 15px rgba(239,198,96,.65)); }
}

@keyframes mp-turn-clock-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 1px rgba(231,112,99,.46), 0 4px 10px rgba(0,0,0,.32); }
  50% { transform: scale(1.07); box-shadow: 0 0 0 3px rgba(217,93,85,.2), 0 0 15px rgba(217,93,85,.32); }
}

.mp-result { position: fixed; left: 50%; top: 50%; z-index: 40; width: min(600px, 90vw); max-height: calc(100vh - 48px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #78633a #09251c; transform: translate(-50%, -50%); box-shadow: 0 20px 45px rgba(0,0,0,.68), 0 0 0 100vmax rgba(3,12,9,.58); }
.mp-result::-webkit-scrollbar { width: 10px; }
.mp-result::-webkit-scrollbar-track { background: #09251c; }
.mp-result::-webkit-scrollbar-thumb { border: 2px solid #09251c; border-radius: 999px; background: #78633a; }
.mp-result #result-text { color: var(--mp-muted); line-height: 1.5; }
.mp-result #result-text h3, .mp-next-game h3 { margin: 15px 0 8px; color: #ead7aa; font: 700 1rem/1.3 var(--font-ui); }
.mp-result-heading, .mp-result-title-block { min-width: 0; }
.mp-result-summary { margin: 0; color: #f3e4c4; font-weight: 700; }
.mp-result-grid { min-width: 0; }
.mp-result-side { min-width: 0; }
.mp-result-scores { margin: 0; padding: 0; border: 0; list-style: none; }
.mp-result-scores li { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 2px; }
.mp-result-scores li + li { border-top: 1px solid rgba(227,193,117,.14); }
.mp-result-scores span, .mp-next-game-players span { min-width: 0; overflow-wrap: anywhere; }
.mp-result-scores strong, .mp-next-game-players strong { flex: 0 0 auto; text-align: right; }
.mp-result-facts { display: grid; gap: 2px; margin: 11px 0 0; padding-top: 9px; border-top: 1px solid rgba(227,193,117,.16); }
.mp-result-facts > div { min-width: 0; display: grid; grid-template-columns: minmax(136px, .42fr) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 5px 2px; }
.mp-result-facts dt { color: #c9bea8; font-size: .78rem; font-weight: 700; letter-spacing: .025em; line-height: 1.25; text-transform: uppercase; white-space: nowrap; }
.mp-result-facts dd { min-width: 0; margin: 0; color: #eee1c6; font-size: .88rem; font-weight: 650; overflow-wrap: anywhere; }
.mp-result-facts .is-highlight dd { color: #f1cf83; }
.mp-winner-showcase { min-width: 0; display: grid; justify-items: center; align-content: start; padding: 0 14px 4px; text-align: center; }
.mp-winner-emblem { display: block; width: min(100%, 120px); height: auto; max-height: 78px; margin: 3px 0 6px; color: #d8ad5d; overflow: visible; }
.mp-winner-crown { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mp-winner-crown-base { stroke: #f0cf82; stroke-width: 1.5; }
.mp-winner-crown-gem { fill: #0b3024; stroke: #f3d78f; stroke-width: 1.25; }
.mp-winner-showcase.is-draw .mp-winner-emblem { display: none; }
.mp-result #result-text .mp-winner-name { width: 100%; min-width: 0; max-width: 430px; margin: 0; color: #edcb7b; font: 700 clamp(1.15rem, 2.15vw, 1.65rem)/1.16 var(--font-head); overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.mp-winner-divider { position: relative; width: min(148px, 46%); height: 9px; margin: 9px 0 7px; }
.mp-winner-divider::before { content: ""; position: absolute; inset: 4px 0 auto; height: 1px; background: #a98543; opacity: .78; }
.mp-winner-divider::after { content: ""; position: absolute; top: 1px; left: 50%; width: 6px; height: 6px; border: 1px solid #d8ad5d; background: #0b3024; transform: translateX(-50%) rotate(45deg); }
.mp-winner-label { margin: 0; color: #c9b784; font-size: .76rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.mp-xp-result { margin-top: 16px; padding: 0 0 0 15px; border-left: 2px solid rgba(227,193,117,.44); }
.mp-result .mp-xp-result h3 { margin: 0; color: #ead7aa; font: 700 1rem/1.3 var(--font-ui); }
.mp-xp-earned { display: block; margin-top: 16px; color: #e9bf68; font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.mp-xp-result p { margin: 5px 0 0; color: #e0d4ba; }
.mp-xp-result .mp-xp-rank-unlocked { color: #f0ce86; font-weight: 700; }
.mp-next-game { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--mp-line-soft); }
.mp-next-game-heading { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 7px; }
.mp-next-game-heading h3 { margin: 0; }
.mp-next-game-count { flex: 0 0 auto; margin: 0; color: #ead7aa; font-size: .88rem; font-weight: 700; }
.mp-next-game-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 0; padding: 0; border-block: 1px solid var(--mp-line-soft); list-style: none; }
.mp-next-game-players li { min-width: 0; min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 2px; }
.mp-next-game-status { margin: 7px 0 0; color: #bfb7a7; font-size: .84rem; line-height: 1.4; }
.mp-result-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mp-line-soft); }
.mp-result:not(.is-game-over) .mp-result-actions { margin-top: 14px; padding-top: 0; border-top: 0; }
.mp-result .ui-button { box-shadow: none; }
.mp-result .ui-button.primary { background: #d8ad5d; }
.mp-result #replay-ready-button.is-ready { border-color: rgba(232,196,121,.48); background: #173a2d; color: #f1deb1; }
.mp-result .ui-button:focus-visible { outline: 3px solid rgba(248,211,123,.95); outline-offset: 3px; }
.mp-result.is-game-over { width: min(900px, calc(100vw - 48px)); max-height: calc(100vh - 32px); padding: 20px 22px; }
.mp-result.is-game-over .mp-result-heading { margin-bottom: 16px; }
.mp-result.is-game-over h2 { margin-bottom: 5px; }
.mp-result.is-game-over .mp-result-summary { color: #bdb5a4; font-size: .86rem; font-weight: 500; }
.mp-result.is-game-over .mp-result-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 28px; align-items: start; }
.mp-result.is-game-over #result-text h3 { margin-top: 0; }
.mp-result.is-game-over .mp-xp-result { min-height: 100%; margin-top: 0; padding: 2px 0 4px 20px; }
.mp-notification-stack { position: fixed; top: 88px; right: 20px; z-index: 2147483647; width: min(390px, calc(100vw - 40px)); max-width: calc(100vw - 40px); max-height: calc(100vh - 108px); max-height: calc(100dvh - 108px); display: grid; gap: 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; pointer-events: none; }
.mp-notification-stack[hidden] { display: none; }
.mp-notification { width: 100%; min-width: 0; min-height: 70px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 32px; align-items: start; gap: 10px; padding: 13px 12px; border: 1px solid #8b7645; border-left-width: 4px; border-radius: 10px; background: #071d16; color: #f4ead5; pointer-events: auto; }
.mp-notification.is-success { border-color: #669575; background: #0a281d; }
.mp-notification.is-error { border-color: #c5786d; background: #321d1a; }
.mp-notification.is-warning { border-color: #d1a953; background: #302815; }
.mp-notification.is-info { border-color: #7897a6; background: #10262c; }
.mp-notification > div { min-width: 0; }
.mp-notification-icon { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; color: #f0d591; font: 800 .86rem/1 var(--font-ui); }
.mp-notification.is-success .mp-notification-icon { color: #9dd0aa; }
.mp-notification.is-error .mp-notification-icon { color: #f0b0a7; }
.mp-notification.is-info .mp-notification-icon { color: #aed0dd; }
.mp-notification strong { display: block; margin: 1px 0 3px; color: #fff2d3; font-size: .86rem; }
.mp-notification p { margin: 0; color: #e5ddcd; font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; }
.mp-notification-close { width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #d5cbb7; font: 700 1.25rem/1 var(--font-ui); cursor: pointer; }
.mp-notification-close:hover { border-color: rgba(232,196,121,.36); background: #16342a; color: #fff0cb; }
.mp-notification-close:focus-visible { outline: 2px solid #f1cd7a; outline-offset: 2px; }
.mp-form-feedback { margin: 3px 0 0; padding: 9px 11px; border: 1px solid rgba(211,124,112,.72); border-radius: 8px; background: #321d1a; color: #f3c4bc; font-size: .86rem; line-height: 1.45; }
.mp-form-feedback::before { content: "Fehler: "; font-weight: 800; }
.mp-field input[aria-invalid="true"], input[aria-invalid="true"] { border-color: #cf857a; outline-color: #cf857a; }

@media (max-width: 1250px) and (min-width: 1101px) {
  .mp-game-board { --card-w: 104px; --card-width: var(--card-w); --card-height: calc(var(--card-w) * 1.42); }
  .mp-game-board .center-table-group { min-width: 420px; gap: 12px; }
  .mp-game-board .pot-panel { width: 150px; min-width: 150px; }
}

@media (max-height: 680px) and (min-width: 1101px) {
  .mp-game-board { --card-w: 96px; --card-width: var(--card-w); --card-height: calc(var(--card-w) * 1.42); --side-hud-gap: 46px; }
  .mp-game-board .center-table-group { min-width: 410px; gap: 12px; }
  .mp-game-board .center-stage > .table-message { bottom: calc(100% + 6px); }
  .mp-result.is-game-over { padding-block: 14px; }
  .mp-result.is-game-over .mp-result-grid { gap: 16px; }
  .mp-result.is-game-over .mp-result-scores li,
  .mp-result.is-game-over .mp-next-game-players li { min-height: 29px; padding-block: 4px; }
}

@media (max-width: 800px) {
  .mp-result.is-game-over .mp-result-grid { grid-template-columns: minmax(0, 1fr); }
  .mp-result.is-game-over .mp-result-side { margin-top: 14px; }
}

@media (max-width: 700px) {
  .mp-header { min-height: 68px; }
  .mp-header-inner { width: min(100% - 32px, 1160px); min-height: 68px; padding-block: 8px; gap: 12px; }
  .mp-back-links { gap: 6px 12px; }
  .mp-back-links a { min-height: 44px; }
  .mp-header-actions, .mp-account-menu, .mp-account-menu summary { min-width: 0; }
  .mp-account-name { max-width: min(28vw, 160px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 560px) {
  .mp-next-game-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .mp-next-game-players { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  .mp-header-inner { justify-content: space-between; }
  .mp-header-brand { display: inline-flex; }
  .mp-mobile-menu { display: block; margin-left: auto; }
  .mp-back-links, .mp-header-actions { display: none; }
  .mp-footer { min-height: 0; padding-block: 16px; }
  .mp-footer-inner { width: min(100% - 32px, 1160px); align-items: center; flex-direction: column; gap: 4px; text-align: center; }
  .mp-footer-inner p { order: 2; margin-top: 8px; font-size: .82rem; line-height: 1.5; white-space: normal; text-align: center; }
  .mp-footer-inner nav { width: 100%; order: 1; align-items: center; justify-content: center; gap: 4px 10px; font-size: .8rem; line-height: 1.4; text-align: center; }
  .mp-footer-inner a { min-height: 44px; justify-content: center; }
  body[data-page="multiplayer"].mp-auth-access { background: var(--mp-bg); }
  body[data-page="multiplayer"].mp-auth-access #mobile-experience { display: none !important; }
  body[data-page="multiplayer"].mp-auth-access #app { min-height: 100vh; min-height: 100svh; display: flex !important; }
  body[data-page="multiplayer"].mp-auth-access .mp-main { width: min(100% - 32px, 720px); padding: 32px 0 40px; }
  body[data-page="multiplayer"].mp-auth-access .mp-auth-grid { grid-template-columns: minmax(0, var(--account-form-max)); gap: 18px; }
  body[data-page="multiplayer"].mp-auth-access .mp-footer-inner { width: min(100% - 32px, 720px); }
}

@media (max-width: 600px) {
  #auth-screen .mp-auth-intro { margin-bottom: 20px; text-align: left; }
  #auth-screen .mp-panel { padding: 22px; }
  #auth-screen .mp-auth-grid { gap: 16px; }
  body[data-page="multiplayer"].mp-auth-access .mp-footer { min-height: 0; padding-block: 20px; }
  body[data-page="multiplayer"].mp-auth-access .mp-footer-inner { align-items: center; flex-direction: column; gap: 8px; }
  body[data-page="multiplayer"].mp-auth-access .mp-footer-inner nav { justify-content: center; }
}

@media (max-width: 430px) {
  .mp-notification-stack { top: 12px; right: 12px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
  body[data-page="multiplayer"].mp-auth-access .mp-main,
  body[data-page="multiplayer"].mp-auth-access .mp-footer-inner { width: min(100% - 24px, 720px); }
  body[data-page="multiplayer"].mp-auth-access .mp-main { padding-block: 24px 32px; }
  #auth-screen .mp-panel { padding: 20px; }
  #auth-screen .mp-auth-form > .ui-button { width: 100%; }
  #auth-screen .mp-auth-help { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .social-confirm-dialog .mp-dialog-surface { padding: 19px; }
  .social-confirm-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .social-confirm-actions .ui-button { width: 100%; }
}

@media (max-width: 720px) {
  .mp-header-inner { width: min(100% - 32px, 1160px); min-height: 0; flex-wrap: wrap; gap: 4px 14px; padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-game-board .card.mp-card-enter,
  .mp-game-board .side-card-slot.mp-card-slot-enter,
  .mp-game-board .player-seat.mp-is-acting .cards,
  .mp-turn-clock.is-critical { animation: none; }
  .mp-notification { scroll-behavior: auto; }
}