:root {
    color-scheme: dark;
    --bg: #090812;
    --bg-deep: #05040b;
    --panel: rgba(19, 15, 31, .88);
    --panel-strong: rgba(27, 20, 39, .96);
    --panel-soft: rgba(31, 24, 45, .68);
    --gold: #d8b566;
    --gold-light: #f3dc9b;
    --gold-dark: #75521c;
    --violet: #9f78cf;
    --green: #79b78d;
    --red: #c76d75;
    --text: #f6edda;
    --muted: #b7acc2;
    --line: rgba(222, 184, 99, .25);
    --shadow: 0 24px 70px rgba(0, 0, 0, .48);
    --radius: 22px;
    --accent: #d4a94f;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg-deep); scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--text);
    background:
        radial-gradient(circle at 50% -20%, rgba(112, 79, 149, .35), transparent 38%),
        radial-gradient(circle at 15% 22%, rgba(44, 105, 88, .22), transparent 32%),
        linear-gradient(180deg, #151024 0%, #0c0a17 45%, #07060d 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image: url("bg-hall.svg");
    background-size: cover;
    background-position: center bottom;
    opacity: .53;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(3, 3, 8, .60), transparent 20%, transparent 80%, rgba(3, 3, 8, .60)),
        linear-gradient(180deg, transparent 62%, rgba(4, 4, 9, .82));
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

.sky-glow {
    position: fixed;
    width: 48vw;
    aspect-ratio: 1;
    left: 50%;
    top: -35vw;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(196, 164, 232, .12);
    filter: blur(70px);
    pointer-events: none;
    z-index: -1;
}
.fireflies { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fireflies::before,
.fireflies::after {
    content: "";
    position: absolute;
    inset: 5% 4%;
    background-image:
        radial-gradient(circle, rgba(255, 224, 122, .92) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(182, 255, 206, .76) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(241, 193, 255, .65) 0 1px, transparent 2px);
    background-size: 137px 131px, 193px 171px, 229px 197px;
    background-position: 11px 3px, 57px 91px, 91px 31px;
    animation: drift 22s linear infinite;
    opacity: .5;
}
.fireflies::after { animation-duration: 31s; animation-direction: reverse; opacity: .34; transform: scale(1.12); }
@keyframes drift { to { transform: translate3d(20px, -45px, 0); } }

.glass-panel {
    border: 1px solid var(--line);
    background:
        linear-gradient(145deg, rgba(255, 239, 196, .045), transparent 35%),
        var(--panel);
    box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.eyebrow {
    margin: 0 0 7px;
    color: var(--gold);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
h1, h2, h3, h4 {
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
    color: #fff8e6;
    letter-spacing: -.02em;
}
h1 { font-size: clamp(2.2rem, 5vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
p { line-height: 1.62; }

.loading-screen,
.auth-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 26%, rgba(111, 74, 151, .34), transparent 34%),
        rgba(7, 6, 13, .88);
    backdrop-filter: blur(9px);
}
.loading-screen { text-align: center; transition: opacity .45s ease, visibility .45s ease; }
.loading-screen.done { opacity: 0; visibility: hidden; }
.loading-emblem { width: 124px; margin: 0 auto 18px; filter: drop-shadow(0 0 25px rgba(236, 200, 118, .34)); animation: pulse 2s ease-in-out infinite; }
.loading-title { font-family: Georgia, serif; font-size: 2.5rem; color: var(--gold-light); }
.loading-screen p { color: var(--muted); }
.loading-rune { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.loading-rune span { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: blink 1.2s infinite; }
.loading-rune span:nth-child(2) { animation-delay: .15s; }
.loading-rune span:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 50% { transform: scale(1.045); filter: drop-shadow(0 0 36px rgba(236, 200, 118, .55)); } }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: scale(.75); } 40% { opacity: 1; transform: scale(1.15); } }

.auth-card { width: min(570px, 100%); padding: clamp(24px, 4vw, 42px); border-radius: 30px; }
.auth-brand { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; }
.auth-brand img { width: 100px; flex: none; filter: drop-shadow(0 0 18px rgba(218, 181, 102, .26)); }
.auth-brand h1 { margin: 0 0 5px; font-size: clamp(2.2rem, 8vw, 3.5rem); }
.auth-brand p:last-child { margin: 0; color: var(--muted); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; padding: 6px; border-radius: 16px; background: rgba(0, 0, 0, .25); }
.auth-tab { border: 0; padding: 12px; border-radius: 12px; background: transparent; cursor: pointer; color: var(--muted); font-weight: 800; }
.auth-tab.active { background: linear-gradient(180deg, rgba(216, 181, 102, .25), rgba(216, 181, 102, .10)); color: var(--gold-light); box-shadow: inset 0 0 0 1px rgba(216, 181, 102, .25); }
.auth-form, .profile-form, .settings-form, .modal form { display: grid; gap: 18px; }
.auth-note { margin: 22px 0 0; text-align: center; color: #8f8799; font-size: .82rem; }

label { display: grid; gap: 8px; color: #e8decc; font-size: .88rem; font-weight: 750; }
input, textarea, select {
    width: 100%;
    border: 1px solid rgba(219, 184, 105, .23);
    border-radius: 13px;
    outline: none;
    color: var(--text);
    background: rgba(5, 5, 12, .54);
    padding: 13px 14px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; min-height: 105px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 19px) 51%, calc(100% - 13px) 51%; background-size: 6px 6px; background-repeat: no-repeat; }
input:focus, textarea:focus, select:focus { border-color: rgba(230, 196, 119, .68); box-shadow: 0 0 0 3px rgba(216, 181, 102, .10); background: rgba(5, 5, 12, .74); }

.btn {
    min-height: 45px;
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 11px 18px;
    cursor: pointer;
    font-weight: 850;
    transition: transform .18s, filter .18s, border-color .18s, background .18s;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-primary {
    color: #241806;
    background: linear-gradient(180deg, #f1d78f, #c99a3e);
    border-color: #f4dfa7;
    box-shadow: 0 9px 24px rgba(187, 133, 41, .22), inset 0 1px rgba(255, 255, 255, .7);
}
.btn-secondary { color: var(--gold-light); background: rgba(216, 181, 102, .08); border-color: rgba(216, 181, 102, .30); }
.btn-danger { color: #ffd4d8; background: rgba(170, 57, 69, .18); border-color: rgba(220, 102, 113, .36); }
.btn-disabled { color: #8e8495; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); cursor: not-allowed; }
.btn-wide { width: 100%; }
.icon-button {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(216, 181, 102, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
    font-size: 1.25rem;
}
.icon-button:hover { background: rgba(216, 181, 102, .10); border-color: rgba(216, 181, 102, .45); }

.app-shell { min-height: 100vh; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 77px;
    display: grid;
    grid-template-columns: minmax(230px, .8fr) minmax(520px, 1.4fr) minmax(280px, .8fr);
    align-items: center;
    gap: 20px;
    margin: 12px;
    padding: 10px 16px;
    border-radius: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.brand img { width: 49px; height: 49px; filter: drop-shadow(0 0 12px rgba(216, 181, 102, .24)); }
.brand span { display: grid; }
.brand strong { color: var(--gold-light); font-family: Georgia, serif; font-size: 1.25rem; }
.brand small { color: #8e8498; font-size: .68rem; }
.main-nav { display: flex; justify-content: center; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 7px; min-height: 44px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #aaa0b5; padding: 8px 12px; font-size: .82rem; font-weight: 800; cursor: pointer; }
.nav-item:hover, .nav-item.active { color: var(--gold-light); background: rgba(216, 181, 102, .08); border-color: rgba(216, 181, 102, .18); }
.top-profile { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.currency-pill { display: flex; align-items: center; gap: 7px; min-height: 40px; border-radius: 12px; padding: 7px 11px; color: var(--gold-light); background: rgba(0, 0, 0, .25); border: 1px solid rgba(216, 181, 102, .18); font-size: .78rem; }
.mini-profile { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.mini-profile img { width: 43px; height: 43px; object-fit: cover; border-radius: 50%; border: 2px solid var(--accent); background: #17111f; }
.mini-profile span { display: grid; min-width: 85px; }
.mini-profile strong { font-size: .88rem; }
.mini-profile small { color: var(--muted); font-size: .7rem; }

.page-stage { width: min(1540px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 60px; }
.view { display: none; animation: view-in .32s ease; }
.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } }

.hero-banner { position: relative; min-height: 310px; display: flex; align-items: center; overflow: hidden; border-radius: 30px; padding: clamp(28px, 5vw, 64px); }
.hero-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 35%, rgba(186, 139, 225, .25), transparent 30%), linear-gradient(90deg, rgba(11, 8, 20, .96), rgba(16, 11, 28, .70) 60%, rgba(16, 11, 28, .30)); }
.hero-copy { position: relative; z-index: 2; max-width: 720px; }
.hero-copy h2 { margin-bottom: 14px; }
.hero-copy h2 span { color: var(--gold-light); }
.hero-copy > p:not(.eyebrow) { color: #c8bdcb; max-width: 650px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero-castle { position: absolute; z-index: 1; right: 4%; bottom: -15px; width: min(35vw, 460px); aspect-ratio: 1; display: grid; place-items: center; }
.hero-castle .moon { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fff9d7, #e0bff1 56%, rgba(181, 134, 222, .3) 70%, transparent 72%); box-shadow: 0 0 65px rgba(205, 170, 233, .35); }
.hero-castle .castle { position: relative; top: 11%; font-size: clamp(8rem, 17vw, 15rem); filter: saturate(.45) brightness(.5) sepia(.2) drop-shadow(0 20px 20px rgba(0,0,0,.65)); }

.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0; }
.stat-card { display: flex; align-items: center; gap: 14px; min-height: 88px; border-radius: 18px; padding: 16px 20px; }
.stat-card > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(216, 181, 102, .10); font-size: 1.5rem; }
.stat-card div { display: grid; }
.stat-card b { font-family: Georgia, serif; font-size: 1.65rem; color: #fff4d6; }
.stat-card small { color: var(--muted); }

.hall-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
.room-browser { min-height: 610px; border-radius: 24px; padding: clamp(20px, 3vw, 30px); }
.hall-sidebar { display: grid; align-content: start; gap: 18px; }
.side-card { border-radius: 22px; padding: 23px; }
.side-card h3 { margin-bottom: 10px; }
.side-card > p:not(.eyebrow) { color: var(--muted); font-size: .91rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.section-heading h3, .section-heading p { margin-bottom: 0; }
.section-heading.compact { margin-bottom: 13px; }
.room-tools { display: flex; align-items: center; gap: 9px; }
.search-field { position: relative; display: block; }
.search-field span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-field input { width: 210px; min-height: 40px; padding: 9px 12px 9px 34px; }
.rooms-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.room-card { position: relative; overflow: hidden; display: grid; gap: 14px; min-height: 190px; border: 1px solid rgba(216, 181, 102, .18); border-radius: 18px; background: linear-gradient(145deg, rgba(216, 181, 102, .055), rgba(255,255,255,.015)); padding: 19px; transition: transform .2s, border-color .2s, background .2s; }
.room-card:hover { transform: translateY(-3px); border-color: rgba(216, 181, 102, .45); background: linear-gradient(145deg, rgba(216, 181, 102, .10), rgba(255,255,255,.025)); }
.room-card::after { content: ""; position: absolute; right: -30px; bottom: -55px; width: 140px; aspect-ratio: 1; border-radius: 50%; background: rgba(143, 101, 188, .08); filter: blur(10px); }
.room-card-head { display: flex; justify-content: space-between; gap: 14px; }
.room-card h4 { margin: 0 0 5px; font-size: 1.08rem; }
.room-card small { color: var(--muted); }
.room-status { height: fit-content; padding: 5px 9px; border-radius: 999px; font-size: .69rem; font-weight: 850; color: #c8f2d3; background: rgba(65, 135, 87, .17); border: 1px solid rgba(100, 180, 124, .22); }
.room-info { display: flex; flex-wrap: wrap; gap: 7px; }
.room-info span { padding: 5px 8px; border-radius: 8px; color: #c2b7c8; background: rgba(0,0,0,.18); font-size: .72rem; }
.room-card-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; }
.mini-avatars { display: flex; }
.mini-avatars img, .avatar-stack img { width: 31px; height: 31px; border-radius: 50%; border: 2px solid #21182e; background: #17111f; object-fit: cover; margin-left: -7px; }
.mini-avatars img:first-child, .avatar-stack img:first-child { margin-left: 0; }
.room-card .btn { min-height: 38px; padding: 8px 12px; font-size: .77rem; }
body.compact-rooms .rooms-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.compact-rooms .room-card { min-height: 165px; padding: 15px; }
.empty-state { min-height: 430px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.empty-state h4 { margin: 12px 0 2px; }
.empty-orb { display: grid; place-items: center; width: 88px; aspect-ratio: 1; border-radius: 50%; font-size: 2.6rem; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.20), rgba(130, 90, 179, .24) 45%, rgba(28,16,45,.8)); box-shadow: 0 0 40px rgba(130, 90, 179, .2); }
.quest-row { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; }
.quest-row > span { font-size: 1.8rem; }
.quest-row div { display: grid; }
.quest-row small { color: var(--muted); }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.065); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8d63bd, #e6c36e); box-shadow: 0 0 15px rgba(216, 181, 102, .3); }
.progress-track.gold span { background: linear-gradient(90deg, #b67a25, #f3d98e); }
.online-dot { width: 10px; height: 10px; border-radius: 50%; background: #73d592; box-shadow: 0 0 10px #73d592; }
.avatar-stack { display: flex; align-items: center; min-height: 40px; }

.profile-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 20px; }
.profile-hero { position: sticky; top: 105px; height: fit-content; overflow: hidden; border-radius: 28px; padding: 38px 28px; text-align: center; }
.profile-aura { position: absolute; width: 240px; aspect-ratio: 1; top: 24px; left: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 68%); filter: blur(4px); }
.profile-avatar-large { position: relative; width: 178px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid var(--accent); background: #17101f; box-shadow: 0 0 0 9px rgba(255,255,255,.025), 0 0 35px color-mix(in srgb, var(--accent) 24%, transparent); }
.profile-title { position: relative; margin: 25px 0 3px; color: var(--gold); font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.profile-hero h2 { position: relative; margin-bottom: 0; font-size: 2rem; }
.profile-hero .muted { margin-top: 4px; }
.level-block { margin: 25px 0 18px; text-align: left; }
.level-block > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; color: #d8cddb; font-size: .76rem; }
.profile-bio { color: var(--muted); font-size: .91rem; }
.profile-content { display: grid; gap: 20px; }
.content-card { border-radius: 24px; padding: clamp(21px, 3vw, 32px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
legend { margin-bottom: 12px; color: #e8decc; font-size: .88rem; font-weight: 750; }
.avatar-grid { display: grid; grid-template-columns: repeat(8, minmax(54px, 1fr)); gap: 9px; }
.avatar-option { position: relative; border: 2px solid transparent; border-radius: 15px; background: rgba(0,0,0,.2); padding: 5px; cursor: pointer; }
.avatar-option img { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
.avatar-option.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.accent-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.accent-option { width: 37px; height: 37px; border: 3px solid rgba(255,255,255,.12); border-radius: 50%; cursor: pointer; background: var(--swatch); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); }
.accent-option.selected { border-color: #fff6dd; transform: scale(1.1); }
.achievements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.achievement { display: flex; align-items: center; gap: 12px; min-height: 90px; border: 1px solid rgba(216, 181, 102, .16); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.025); }
.achievement.locked { filter: grayscale(.85); opacity: .45; }
.achievement > span { display: grid; place-items: center; width: 45px; aspect-ratio: 1; border-radius: 13px; background: rgba(216, 181, 102, .10); font-size: 1.35rem; }
.achievement div { display: grid; }
.achievement small { color: var(--muted); }

.guide-header { display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 28px; padding: clamp(28px, 5vw, 55px); margin-bottom: 18px; }
.guide-header > div:first-child { max-width: 920px; }
.guide-header p:last-child { color: var(--muted); }
.book-icon { font-size: clamp(5rem, 12vw, 10rem); filter: drop-shadow(0 15px 30px rgba(0,0,0,.45)); }
.guide-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; margin-bottom: 18px; }
.step-list { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.step-list li { display: flex; gap: 14px; align-items: flex-start; }
.step-list li > span { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid rgba(216, 181, 102, .3); border-radius: 50%; color: var(--gold-light); background: rgba(216,181,102,.08); font-family: Georgia, serif; font-weight: 800; }
.step-list p { margin: 3px 0 0; color: var(--muted); font-size: .88rem; }
.special-cards { display: grid; align-content: start; gap: 13px; }
.special-cards h3 { margin-bottom: 5px; }
.special-cards article { display: flex; align-items: center; gap: 14px; border: 1px solid rgba(216,181,102,.12); border-radius: 15px; padding: 12px; background: rgba(0,0,0,.12); }
.special-cards article p { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.special-card { display: grid; place-items: center; width: 48px; height: 66px; flex: none; border: 2px solid rgba(255,255,255,.35); border-radius: 8px; color: white; font-family: Georgia, serif; font-size: 1.35rem; box-shadow: 0 8px 13px rgba(0,0,0,.25); }
.special-card.wild { background: linear-gradient(145deg, #45275c, #b17ad2); }
.special-card.skip { background: linear-gradient(145deg, #4c1821, #c45466); }
.special-card.color { background: linear-gradient(145deg, #174d4c, #54b6a7); }
.phases-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.phase-card { min-height: 150px; border: 1px solid rgba(216,181,102,.16); border-radius: 16px; padding: 16px; background: linear-gradient(145deg, rgba(216,181,102,.055), rgba(255,255,255,.015)); }
.phase-number { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 13px; border-radius: 12px; color: #241806; background: linear-gradient(180deg, #f0d588, #bc8730); font-family: Georgia, serif; font-weight: 900; }
.phase-card h4 { margin-bottom: 6px; font-size: 1rem; }
.phase-card p { margin: 0; color: var(--muted); font-size: .79rem; }

.ranking-layout { display: grid; gap: 18px; }
.ranking-hero { overflow: hidden; border-radius: 28px; padding: clamp(28px, 5vw, 48px); text-align: center; }
.ranking-hero > p:not(.eyebrow) { color: var(--muted); }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; min-height: 260px; margin-top: 25px; }
.podium-place { width: min(220px, 28%); text-align: center; }
.podium-place img { width: 82px; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--medal); background: #17111f; object-fit: cover; box-shadow: 0 0 25px color-mix(in srgb, var(--medal) 30%, transparent); }
.podium-place strong { display: block; margin: 7px 0 10px; }
.podium-block { min-height: var(--height); display: grid; place-items: center; border-radius: 18px 18px 7px 7px; color: #21170a; background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 82%, white), var(--medal)); font-family: Georgia, serif; font-size: 2rem; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.5); }
.ranking-table-wrap { overflow-x: auto; }
.ranking-table { width: 100%; border-collapse: collapse; }
.ranking-table th, .ranking-table td { padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.065); text-align: left; white-space: nowrap; }
.ranking-table th { color: var(--gold); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.rank-player { display: flex; align-items: center; gap: 10px; }
.rank-player img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #17111f; border: 2px solid var(--accent-color, var(--gold)); }
.rank-number { font-family: Georgia, serif; font-size: 1.2rem; color: var(--gold-light); }

.settings-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 18px; }
.settings-intro { position: relative; overflow: hidden; min-height: 390px; border-radius: 28px; padding: clamp(28px, 4vw, 45px); }
.settings-intro p:last-of-type { color: var(--muted); }
.settings-orb { position: absolute; right: -35px; bottom: -50px; display: grid; place-items: center; width: 260px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.18), rgba(125,86,170,.20) 44%, rgba(18,10,31,.78)); font-size: 7rem; box-shadow: 0 0 60px rgba(135, 91, 180, .2); }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.065); }
.setting-row p { margin: 3px 0 0; color: var(--muted); font-size: .84rem; }
.switch { display: inline-block; flex: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { display: block; width: 52px; height: 29px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12); padding: 3px; cursor: pointer; transition: .2s; }
.switch span::before { content: ""; display: block; width: 21px; height: 21px; border-radius: 50%; background: #a99eae; transition: .2s; }
.switch input:checked + span { background: color-mix(in srgb, var(--accent) 35%, #1c1627); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.switch input:checked + span::before { transform: translateX(23px); background: var(--gold-light); }

.modal {
    width: min(610px, calc(100% - 24px));
    max-height: calc(100vh - 30px);
    overflow: auto;
    border-radius: 24px;
    padding: clamp(22px, 4vw, 32px);
    color: var(--text);
}
.modal::backdrop { background: rgba(4, 3, 8, .76); backdrop-filter: blur(8px); }
.modal-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 22px; }
.modal-heading h3, .modal-heading p { margin-bottom: 0; }
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.checkbox-line { grid-template-columns: auto 1fr; align-items: start; gap: 10px; color: var(--muted); font-weight: 500; }
.checkbox-line input { width: 18px; height: 18px; accent-color: var(--gold); }
.room-modal { width: min(760px, calc(100% - 24px)); }
.room-dialog-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.room-dialog-meta span { padding: 6px 10px; border-radius: 9px; background: rgba(0,0,0,.2); color: var(--muted); font-size: .78rem; }
.participants-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.participant { position: relative; min-height: 150px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px solid rgba(216,181,102,.15); border-radius: 16px; background: rgba(255,255,255,.025); padding: 14px; }
.participant img { width: 70px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid rgba(216,181,102,.48); background: #17111f; }
.participant strong { margin-top: 8px; }
.participant small { color: var(--muted); }
.participant .ready-badge { position: absolute; right: 8px; top: 8px; padding: 4px 7px; border-radius: 7px; color: #c4f3cf; background: rgba(62,132,83,.22); font-size: .65rem; }
.participant .remove-bot { position: absolute; left: 7px; top: 7px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(164,55,67,.2); color: #ffd2d6; cursor: pointer; }
.empty-seat { border-style: dashed; color: #706879; }
.empty-seat span { font-size: 2rem; }
.room-actions { margin-top: 20px; }
.small-modal { width: min(460px, calc(100% - 24px)); }

.toast-region { position: fixed; z-index: 2000; right: 18px; bottom: calc(18px + var(--safe-bottom)); display: grid; gap: 10px; width: min(380px, calc(100% - 36px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; border: 1px solid rgba(216,181,102,.28); border-radius: 14px; background: rgba(22,16,32,.96); box-shadow: 0 16px 45px rgba(0,0,0,.42); padding: 14px 15px; animation: toast-in .25s ease; pointer-events: auto; }
.toast.error { border-color: rgba(210,95,105,.45); }
.toast.success { border-color: rgba(94,177,119,.42); }
.toast span { font-size: 1.15rem; }
.toast p { margin: 0; line-height: 1.4; font-size: .86rem; }
@keyframes toast-in { from { opacity: 0; transform: translateX(15px); } }
.noscript { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 30px; color: white; background: #0b0811; text-align: center; }
.mobile-nav { display: none; }
.mobile-logout { display: none; }

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
body.no-animations .fireflies { display: none; }

@media (max-width: 1180px) {
    .topbar { grid-template-columns: 220px 1fr auto; }
    .nav-item { padding-inline: 9px; }
    .nav-item span { display: none; }
    .currency-pill { display: none; }
    .hall-grid { grid-template-columns: minmax(0, 1fr) 300px; }
    .phases-grid { grid-template-columns: repeat(3, 1fr); }
    body.compact-rooms .rooms-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    body { padding-bottom: calc(76px + var(--safe-bottom)); }
    .topbar { position: relative; grid-template-columns: 1fr auto; margin: 8px; min-height: 68px; }
    .main-nav { display: none; }
    .brand small, .mini-profile span, #logoutButton { display: none; }
    .brand img { width: 45px; height: 45px; }
    .top-profile { gap: 0; }
    .mini-profile img { width: 45px; height: 45px; }
    .page-stage { width: min(100% - 16px, 820px); padding-top: 8px; }
    .hero-banner { min-height: 370px; align-items: flex-start; }
    .hero-copy { max-width: 100%; }
    .hero-castle { right: -5%; opacity: .36; width: 75vw; }
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .hall-grid, .profile-layout, .settings-layout { grid-template-columns: 1fr; }
    .hall-sidebar { grid-template-columns: repeat(2, 1fr); }
    .online-card { display: none; }
    .profile-hero { position: relative; top: auto; }
    .guide-grid { grid-template-columns: 1fr; }
    .phases-grid { grid-template-columns: repeat(2, 1fr); }
    .avatar-grid { grid-template-columns: repeat(4, 1fr); }
    .achievements-grid { grid-template-columns: repeat(2, 1fr); }
    .mobile-logout { display: block; }
    .mobile-nav {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: max(8px, var(--safe-bottom));
        z-index: 150;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        border: 1px solid rgba(216,181,102,.22);
        border-radius: 18px;
        background: rgba(17,13,25,.94);
        box-shadow: 0 18px 50px rgba(0,0,0,.55);
        backdrop-filter: blur(18px);
        padding: 6px;
    }
    .mobile-nav button { display: grid; place-items: center; gap: 2px; min-width: 0; border: 0; border-radius: 12px; padding: 7px 2px; background: transparent; color: #8f8597; font-size: .61rem; cursor: pointer; }
    .mobile-nav button span { font-size: 1.05rem; }
    .mobile-nav button.active { color: var(--gold-light); background: rgba(216,181,102,.09); }
}

@media (max-width: 650px) {
    .auth-screen { align-items: start; overflow-y: auto; }
    .auth-card { margin: 18px 0; }
    .auth-brand { display: block; text-align: center; }
    .auth-brand img { width: 90px; margin-bottom: 12px; }
    .hero-banner { padding: 25px 20px; border-radius: 23px; }
    .hero-actions { display: grid; }
    .hero-actions .btn { width: 100%; }
    .stat-strip { gap: 8px; }
    .stat-card { min-height: 74px; padding: 12px; gap: 9px; }
    .stat-card > span { width: 40px; height: 40px; }
    .stat-card b { font-size: 1.3rem; }
    .hall-sidebar { grid-template-columns: 1fr; }
    .room-browser { padding: 17px 13px; }
    .section-heading { align-items: flex-start; }
    .room-browser > .section-heading { display: grid; }
    .room-tools, .search-field, .search-field input { width: 100%; }
    .room-tools .icon-button { flex: none; }
    .rooms-list, body.compact-rooms .rooms-list { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .achievements-grid { grid-template-columns: 1fr; }
    .guide-header { align-items: flex-start; }
    .book-icon { display: none; }
    .phases-grid { grid-template-columns: 1fr; }
    .phase-card { min-height: 120px; }
    .participants-grid { grid-template-columns: repeat(2, 1fr); }
    .podium { gap: 6px; min-height: 220px; }
    .podium-place { width: 32%; }
    .podium-place img { width: 60px; }
    .podium-place strong { font-size: .76rem; }
    .setting-row { align-items: flex-start; }
    .settings-orb { opacity: .38; }
    .modal-actions { display: grid; grid-template-columns: 1fr; }
    .modal-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* ========================================================================== */
/* Märchenpfad V2 – vollständiger märchenhafter Spieltisch                    */
/* ========================================================================== */

body.game-active {
    overflow: hidden;
    padding: 0 !important;
    background: #02050a;
}
body.game-active::before,
body.game-active::after,
body.game-active > .sky-glow,
body.game-active > .fireflies { display: none; }
body.game-active .topbar,
body.game-active .page-stage,
body.game-active .mobile-nav { visibility: hidden; pointer-events: none; }

.game-screen {
    position: fixed;
    inset: 0;
    z-index: 1800;
    overflow: hidden;
    isolation: isolate;
    background: #07121c url("table-bg.png") center / cover no-repeat;
    user-select: none;
}
.game-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 50% 46%, transparent 26%, rgba(1, 5, 10, .10) 58%, rgba(0, 0, 0, .58) 100%),
        linear-gradient(180deg, rgba(3, 8, 14, .06), rgba(0, 0, 0, .20));
    pointer-events: none;
}
.game-vignette {
    position: absolute;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    box-shadow: inset 0 0 90px 28px rgba(0, 0, 0, .64), inset 0 0 28px rgba(255, 184, 65, .12);
}
.game-particle-field { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.game-particle {
    position: absolute;
    width: var(--size, 4px);
    height: var(--size, 4px);
    left: var(--left, 50%);
    top: 110%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7c1 0 15%, #ffd866 25%, rgba(255, 194, 56, .1) 70%, transparent 72%);
    box-shadow: 0 0 10px #ffcf52, 0 0 24px rgba(117, 204, 255, .45);
    opacity: 0;
    animation: fairy-rise var(--duration, 10s) linear infinite;
    animation-delay: var(--delay, 0s);
}
.game-particle.blue { filter: hue-rotate(120deg); }
.game-particle.purple { filter: hue-rotate(230deg); }
@keyframes fairy-rise {
    0% { transform: translate3d(0, 0, 0) scale(.55); opacity: 0; }
    8% { opacity: .85; }
    45% { transform: translate3d(var(--drift, 25px), -52vh, 0) scale(1); }
    90% { opacity: .7; }
    100% { transform: translate3d(calc(var(--drift, 25px) * -.5), -120vh, 0) scale(.4); opacity: 0; }
}

.game-top-hud {
    position: absolute;
    z-index: 100;
    top: max(10px, env(safe-area-inset-top));
    left: 14px;
    right: 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    pointer-events: none;
}
.game-top-hud > * { pointer-events: auto; }
.game-round-button,
.game-icon-button,
.game-action-button {
    border: 1px solid rgba(255, 211, 112, .52);
    color: #fff4d6;
    background:
        linear-gradient(180deg, rgba(61, 36, 20, .96), rgba(20, 14, 16, .96)),
        #211319;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 7px 24px rgba(0,0,0,.48), 0 0 17px rgba(255,183,58,.08);
    cursor: pointer;
    text-shadow: 0 1px 2px #000;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.game-round-button:hover,
.game-icon-button:hover,
.game-action-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 8px 28px rgba(0,0,0,.52), 0 0 22px rgba(255,197,70,.18); }
.game-round-button { padding: 10px 15px; border-radius: 14px; font-weight: 800; }
.game-icon-button { width: 44px; height: 44px; border-radius: 13px; font-size: 1.2rem; }
.game-top-actions { display: flex; gap: 8px; }
.game-round-info {
    justify-self: center;
    min-width: 230px;
    padding: 8px 28px 10px;
    border: 1px solid rgba(237,190,82,.52);
    border-radius: 0 0 24px 24px;
    color: #fff3cf;
    text-align: center;
    background: linear-gradient(180deg, rgba(16,31,52,.96), rgba(8,14,28,.90));
    box-shadow: 0 12px 36px rgba(0,0,0,.42), inset 0 -8px 20px rgba(21,94,146,.16);
}
.game-round-info span { display: block; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #c4d8e9; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.game-round-info strong { font-family: Georgia, serif; font-size: 1.08rem; }

.turn-banner {
    position: absolute;
    z-index: 90;
    top: clamp(62px, 7.5vh, 88px);
    left: 50%;
    width: min(520px, 56vw);
    padding: 9px 54px 10px;
    transform: translateX(-50%);
    border: 1px solid rgba(255,211,103,.48);
    border-radius: 16px;
    text-align: center;
    color: #fff2d0;
    background: linear-gradient(90deg, rgba(4,13,25,.18), rgba(8,24,45,.94) 15%, rgba(17,35,62,.97) 50%, rgba(8,24,45,.94) 85%, rgba(4,13,25,.18));
    box-shadow: 0 10px 30px rgba(0,0,0,.44), 0 0 22px rgba(79,174,255,.12);
    pointer-events: none;
}
.turn-banner::before,
.turn-banner::after { content: "◆"; position: absolute; top: 50%; transform: translateY(-50%); color: #e5b94e; text-shadow: 0 0 12px #ffc642; }
.turn-banner::before { left: 22px; }
.turn-banner::after { right: 22px; }
.turn-banner strong { display: block; font-family: Georgia, serif; font-size: clamp(.9rem, 1.4vw, 1.12rem); }
.turn-banner small { display: block; color: #9fbbd2; font-size: .7rem; margin-top: 2px; }
.turn-banner.your-turn { animation: turn-glow 1.8s ease-in-out infinite; }
@keyframes turn-glow { 50% { box-shadow: 0 10px 30px rgba(0,0,0,.42), 0 0 32px rgba(255,205,72,.34); filter: brightness(1.08); } }
.turn-rune { display: none; }

.game-players { position: absolute; inset: 0; z-index: 22; pointer-events: none; }
.table-player {
    --frame-image: url("player-frames/purple.png");
    position: absolute;
    left: var(--seat-x, 5%);
    top: var(--seat-y, 8%);
    width: clamp(175px, 18vw, 315px);
    aspect-ratio: 1.345 / 1;
    transform: translate(var(--seat-tx, 0), var(--seat-ty, 0)) scale(var(--seat-scale, 1));
    transform-origin: center;
    filter: drop-shadow(0 9px 14px rgba(0,0,0,.62));
    pointer-events: none;
    transition: filter .28s ease, transform .28s ease;
}
.table-player.current-turn { filter: drop-shadow(0 0 13px #ffd45d) drop-shadow(0 10px 16px rgba(0,0,0,.66)); }
.table-player.current-turn::after {
    content: "";
    position: absolute;
    inset: 8% 3% 12%;
    border-radius: 40%;
    box-shadow: 0 0 25px 8px rgba(255,205,72,.20);
    animation: player-pulse 1.5s ease-in-out infinite;
}
@keyframes player-pulse { 50% { opacity: .4; transform: scale(1.025); } }
.table-player-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 4; pointer-events: none; }
.table-player-avatar {

  position: absolute;

  z-index: 2;

  left: 10.5%;

  top: 17%;

  width: 50%;

  height: 60%;

  object-fit: cover;

  border-radius: 50%;

  filter: saturate(1.12) contrast(1.04);

  background: radial-gradient(circle, #214d65, #06111a 73%);

    background-position-x: 0%;

    background-position-y: 0%;

    background-repeat: repeat;

    background-size: auto;

}
.table-player-data {
    position: absolute;
    z-index: 6;
    left: 55%;
    top: 34%;
    width: 37%;
    text-align: center;
    color: #fff2d6;
    text-shadow: 0 2px 3px #000, 0 0 7px #000;
}
.table-player-data strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: Georgia, serif; font-size: clamp(.68rem, 1vw, .95rem); }
.table-player-data small { display: block; color: #dcc38f; font-size: clamp(.52rem, .65vw, .7rem); }
.table-player-stats { display: grid; gap: 2px; margin-top: 5px; font-size: clamp(.48rem, .62vw, .68rem); color: #e8dfcf; }
.table-player-stats span { display: flex; justify-content: space-between; gap: 4px; }
.table-player-cards {
    position: absolute;
    z-index: 7;
    left: 16%;
    bottom: 8%;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,220,130,.38);
    background: rgba(2,8,14,.80);
    color: #fff0c7;
    text-align: center;
    font-size: clamp(.54rem, .68vw, .72rem);
    box-shadow: 0 3px 12px rgba(0,0,0,.45);
}
.table-player-ready {
    position: absolute;
    z-index: 8;
    right: 7%;
    top: 12%;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #0b2111;
    background: #7fe99e;
    box-shadow: 0 0 14px #78e99b;
    font-size: .7rem;
}

.phase-panel {
    position: absolute;
    z-index: 40;
    left: clamp(12px, 2vw, 34px);
    top: clamp(82px, 10vh, 120px);
    width: clamp(150px, 15vw, 230px);
    padding: 12px 17px 14px;
    border: 1px solid rgba(255,201,87,.45);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(24,10,42,.94), rgba(6,14,28,.92));
    box-shadow: 0 14px 35px rgba(0,0,0,.46), inset 0 0 24px rgba(146,70,203,.11);
}
.phase-panel-kicker { display: block; color: #c89ae9; font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.phase-panel strong { display: block; margin: 2px 0 3px; color: #f5d98e; font-family: Georgia, serif; font-size: clamp(1rem, 1.5vw, 1.3rem); }
.phase-panel p { margin: 0; color: #f3eadc; font-size: clamp(.68rem, .8vw, .82rem); line-height: 1.35; }
.phase-status { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.10); color: #e5a4a8; font-size: .65rem; }
.phase-status.complete { color: #8fe1a5; }

.table-play-zone {
    position: absolute;
    z-index: 20;
    left: 19%;
    right: 19%;
    top: 23%;
    bottom: 33%;
    pointer-events: none;
}
.draw-zone {
    position: absolute;
    left: 50%;
    top: 47%;
    display: flex;
    align-items: flex-end;
    gap: clamp(20px, 3vw, 52px);
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.card-pile {
    position: relative;
    width: clamp(64px, 6.5vw, 102px);
    aspect-ratio: .66;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    perspective: 600px;
    transition: transform .2s ease, filter .2s ease;
}
.card-pile:hover:not(:disabled) { transform: translateY(-5px) scale(1.035); filter: drop-shadow(0 0 14px rgba(255,212,92,.44)); }
.card-pile:disabled { cursor: not-allowed; filter: grayscale(.45) brightness(.78); }
.card-pile small { position: absolute; left: 50%; bottom: -22px; width: 120px; transform: translateX(-50%); color: #e6d8b9; text-shadow: 0 2px 3px #000; font-size: clamp(.55rem, .7vw, .75rem); }
.pile-depth { position: absolute; inset: 5px -5px -5px 5px; border-radius: 10px; border: 2px solid #9f6927; background: #1a1026; box-shadow: 4px 4px 0 #3a2516, 8px 8px 0 #120c0b; }
.card-back {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid #d8a943;
    border-radius: 10px;
    color: #ffe7a2;
    background:
        radial-gradient(circle at 50% 50%, rgba(104,87,200,.55), transparent 32%),
        repeating-conic-gradient(from 0deg at 50% 50%, #162b55 0 8deg, #0b142d 8deg 16deg);
    box-shadow: inset 0 0 0 3px #472c15, inset 0 0 22px #000, 0 7px 16px rgba(0,0,0,.55);
}
.card-back::before { content: ""; position: absolute; inset: 8%; border: 1px solid #dcb75d; border-radius: 7px; transform: rotate(45deg); }
.card-back i { position: absolute; font-size: clamp(2rem, 4vw, 4.4rem); color: rgba(255,226,132,.34); text-shadow: 0 0 20px #a76dff; }
.card-back b { z-index: 1; font-family: Georgia, serif; font-size: clamp(1.2rem, 2.2vw, 2.2rem); }
.discard-pile > span { position: absolute; inset: 0; }

.fairy-card {
    --card-main: #772d38;
    --card-light: #e16d74;
    --card-dark: #27070d;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: clamp(2px, .22vw, 4px) solid #e5bd61;
    border-radius: clamp(7px, .7vw, 12px);
    color: #fff9e9;
    background:
        radial-gradient(circle at 50% 44%, rgba(255,255,255,.22), transparent 23%),
        linear-gradient(145deg, var(--card-light), var(--card-main) 35%, var(--card-dark) 92%);
    box-shadow: inset 0 0 0 2px #5a3514, inset 0 0 22px rgba(0,0,0,.46), 0 7px 15px rgba(0,0,0,.52);
    text-shadow: 0 2px 3px #000, 0 0 9px rgba(255,255,255,.28);
    transform-style: preserve-3d;
}
.fairy-card::before {
    content: "";
    position: absolute;
    inset: 5%;
    border: 1px solid rgba(255,232,159,.75);
    border-radius: 7px;
    background:
        linear-gradient(45deg, transparent 46%, rgba(255,232,159,.36) 48% 52%, transparent 54%) center / 18px 18px,
        radial-gradient(circle, transparent 56%, rgba(0,0,0,.30) 58% 72%, transparent 74%);
    pointer-events: none;
}
.fairy-card.ruby { --card-main:#8e2635; --card-light:#e86670; --card-dark:#26070d; }
.fairy-card.sapphire { --card-main:#1a5b8b; --card-light:#5bb2e4; --card-dark:#071f34; }
.fairy-card.emerald { --card-main:#226f50; --card-light:#56bb89; --card-dark:#082a1e; }
.fairy-card.amber { --card-main:#a86917; --card-light:#efbc55; --card-dark:#382006; }
.fairy-card.wild { --card-main:#722f9c; --card-light:#ef76ea; --card-dark:#101b58; background: conic-gradient(from 35deg, #e65372, #e8b751, #43b779, #3695d1, #8a58cf, #e65372); }
.fairy-card.skip { --card-main:#29283d; --card-light:#76738f; --card-dark:#090910; }
.card-corner { position: absolute; z-index: 3; display: grid; place-items: center; width: 23%; aspect-ratio: 1; font-family: Georgia, serif; font-size: clamp(.62rem, 1.35vw, 1.2rem); font-weight: 900; }
.card-corner.top { left: 2%; top: 1%; }
.card-corner.bottom { right: 2%; bottom: 1%; transform: rotate(180deg); }
.card-center {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 48%;
    width: 58%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,231,155,.7);
    border-radius: 50%;
    font-family: Georgia, serif;
    font-size: clamp(1.65rem, 3.4vw, 3.8rem);
    font-weight: 900;
    background: radial-gradient(circle, rgba(255,255,255,.18), rgba(0,0,0,.16) 65%, rgba(0,0,0,.35));
    box-shadow: inset 0 0 18px rgba(0,0,0,.38), 0 0 16px rgba(255,220,127,.22);
}
.card-symbol { position: absolute; z-index: 1; left: 50%; bottom: 9%; transform: translateX(-50%); color: rgba(255,237,178,.8); font-size: clamp(.5rem, .8vw, .85rem); }

.meld-area {
    position: absolute;
    left: 50%;
    top: 2%;
    width: min(100%, 760px);
    max-height: 55%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: clamp(7px, 1vw, 13px);
    transform: translateX(-50%);
    pointer-events: auto;
}
.table-meld {
    position: relative;
    min-width: 105px;
    padding: 21px 9px 8px;
    border: 1px solid rgba(255,211,111,.35);
    border-radius: 12px;
    background: rgba(9,19,24,.66);
    box-shadow: 0 7px 18px rgba(0,0,0,.38), inset 0 0 16px rgba(63,143,166,.10);
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.table-meld:hover { transform: translateY(-3px); border-color: rgba(255,221,119,.8); box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 18px rgba(255,205,73,.15); }
.table-meld.can-hit { animation: meld-invite 1.3s ease-in-out infinite; }
@keyframes meld-invite { 50% { border-color: #ffe17c; box-shadow: 0 0 20px rgba(255,214,85,.36); } }
.table-meld-label { position: absolute; left: 8px; right: 8px; top: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #e7c46f; font-size: .52rem; text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.meld-cards { display: flex; justify-content: center; min-height: clamp(50px, 5.5vw, 82px); }
.meld-card { width: clamp(34px, 3.7vw, 58px); aspect-ratio: .66; margin-left: clamp(-13px, -1.15vw, -5px); }
.meld-card:first-child { margin-left: 0; }

.hand-shell {
    position: absolute;
    z-index: 48;
    left: 50%;
    bottom: clamp(-32px, -3.5vh, -10px);
    width: min(80vw, 1160px);
    aspect-ratio: 1896  / 655;
    transform: translateX(-50%);
    filter: drop-shadow(0 -8px 22px rgba(0,0,0,.62)) drop-shadow(0 0 17px rgba(255,190,54,.11));
    transition: transform .3s ease, opacity .3s ease;
}
.hand-shell.hand-hidden { transform: translate(-50%, 68%); opacity: .68; }
.hand-frame-image { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.hand-cards {
    position: absolute;
    z-index: 2;
    left: 9.5%;
    right: 9.5%;
    top: 25%;
    bottom: 13%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 2%;
    perspective: 900px;
}
.hand-card {
    position: relative;
    flex: 0 0 clamp(56px, 6.2vw, 96px);
    aspect-ratio: .66;
    margin-left: var(--overlap, -18px);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(var(--lift, 0)) rotate(var(--fan, 0deg));
    transform-origin: 50% 120%;
    filter: drop-shadow(0 7px 5px rgba(0,0,0,.42));
    transition: transform .18s ease, filter .18s ease;
}
.hand-card:first-child { margin-left: 0; }
.hand-card:hover { --lift: -17px; z-index: 12; filter: drop-shadow(0 11px 8px rgba(0,0,0,.50)) drop-shadow(0 0 8px rgba(255,227,138,.28)); }
.hand-card.selected { --lift: -30px; z-index: 16; filter: drop-shadow(0 0 10px #ffe27c) drop-shadow(0 12px 8px rgba(0,0,0,.55)); }
.hand-card.selected .fairy-card { box-shadow: inset 0 0 0 2px #fff0a7, inset 0 0 22px rgba(0,0,0,.42), 0 0 18px rgba(255,218,89,.60); }
.hand-card.new-card { animation: hand-arrive .5s cubic-bezier(.17,.84,.31,1.25); }
@keyframes hand-arrive { from { opacity: 0; transform: translateY(-130px) scale(.3) rotate(18deg); } }

.game-action-bar {
    position: absolute;
    z-index: 75;
    left: 50%;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 7px;
    transform: translateX(-50%);
    padding: 6px;
    border: 1px solid rgba(255,206,94,.38);
    border-radius: 17px;
    background: rgba(8,12,20,.91);
    box-shadow: 0 9px 28px rgba(0,0,0,.55), inset 0 0 16px rgba(73,129,171,.08);
    backdrop-filter: blur(12px);
}
.selected-count { min-width: 76px; padding: 0 7px; color: #d7c9ad; font-size: .68rem; text-align: center; }
.game-action-button { padding: 8px 12px; border-radius: 11px; font-size: clamp(.62rem, .75vw, .78rem); font-weight: 800; white-space: nowrap; }
.game-action-button.primary { color: #1d1507; border-color: #ffe291; background: linear-gradient(#f5df9f, #c58b2d); text-shadow: none; }
.game-action-button.danger { border-color: rgba(240,113,117,.60); background: linear-gradient(#7b2731, #3b1219); }
.game-action-button:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.5); }
.game-action-hint {
    position: absolute;
    z-index: 42;
    left: 50%;
    bottom: clamp(26.5vh, 285px, 37vh);
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 14px;
    color: #f3e5c3;
    background: rgba(4,12,18,.74);
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    font-size: clamp(.58rem, .75vw, .76rem);
    pointer-events: none;
}

.game-log-panel {
    position: absolute;
    z-index: 110;
    right: 14px;
    top: 66px;
    bottom: 24%;
    width: min(320px, 25vw);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(231,190,91,.36);
    border-radius: 18px;
    background: rgba(6,12,22,.92);
    box-shadow: 0 18px 45px rgba(0,0,0,.52);
    backdrop-filter: blur(14px);
    transform: translateX(calc(100% + 25px));
    transition: transform .25s ease;
    overflow: hidden;
}
.game-log-panel.open { transform: translateX(0); }
.game-log-title { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid rgba(255,255,255,.09); color: #f1d58e; }
.game-log-title strong { flex: 1; font-family: Georgia, serif; }
.game-log-title button { width: 28px; height: 28px; border: 0; border-radius: 8px; color: white; background: rgba(255,255,255,.08); cursor: pointer; }
.game-log { flex: 1; overflow: auto; padding: 10px; scrollbar-width: thin; }
.game-log-entry { display: grid; grid-template-columns: 18px 1fr; gap: 7px; padding: 7px 5px; border-bottom: 1px solid rgba(255,255,255,.06); color: #cfc4b1; font-size: .67rem; line-height: 1.35; }
.game-log-entry:last-child { color: #fff0c8; }

.winner-modal { width: min(580px, calc(100vw - 24px)); text-align: center; overflow: visible; }
.winner-crown { font-size: 4.5rem; filter: drop-shadow(0 0 24px rgba(255,210,79,.55)); animation: crown-float 2s ease-in-out infinite; }
@keyframes crown-float { 50% { transform: translateY(-8px) rotate(3deg); } }
.winner-ranking { display: grid; gap: 7px; margin: 18px 0; text-align: left; }
.winner-row { display: grid; grid-template-columns: 38px 1fr auto auto; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: rgba(255,255,255,.055); }
.winner-row img { width: 34px; height: 34px; border-radius: 50%; }
.winner-row small { color: #b9ad99; }

.landscape-note { display: none; }

@media (max-aspect-ratio: 1.2/1) and (max-width: 900px) {
    .game-screen > *:not(.landscape-note) { opacity: .15; filter: blur(5px); pointer-events: none; }
    .landscape-note {
        position: absolute;
        inset: 0;
        z-index: 400;
        display: grid;
        place-content: center;
        gap: 8px;
        padding: 28px;
        color: #fff1cf;
        text-align: center;
        background: rgba(3,7,13,.82);
    }
    .landscape-note span { font-size: 3.4rem; animation: rotate-note 1.8s ease-in-out infinite; }
    .landscape-note strong { font-family: Georgia, serif; font-size: 1.5rem; }
    .landscape-note small { color: #c3b69e; }
    @keyframes rotate-note { 50% { transform: rotate(90deg); } }
}

@media (max-width: 1100px), (max-height: 720px) {
    .table-player { width: clamp(150px, 16.5vw, 230px); }
    .phase-panel { top: 70px; width: 165px; padding: 9px 12px; }
    .turn-banner { top: 55px; }
    .table-play-zone { left: 16%; right: 16%; top: 22%; bottom: 31%; }
    .hand-shell { width: min(76vw, 900px); bottom: -30px; }
    .game-action-hint { bottom: 29%; }
    .hand-card { flex-basis: clamp(48px, 5.6vw, 76px); }
    .game-action-button { padding: 7px 9px; }
}

@media (max-height: 620px) {
    .game-round-info { padding-block: 5px 7px; }
    .turn-banner { top: 48px; padding-block: 5px 6px; }
    .phase-panel { top: 58px; transform: scale(.85); transform-origin: left top; }
    .table-player { width: clamp(135px, 15vw, 195px); }
    .table-play-zone { top: 20%; bottom: 28%; }
    .hand-shell { width: min(70vw, 760px); bottom: -42px; }
    .game-action-hint { display: none; }
    .game-action-bar { transform: translateX(-50%) scale(.86); transform-origin: bottom center; }
    .meld-card { width: clamp(30px, 3.4vw, 44px); }
}

@media (max-width: 760px) {
    .game-round-button { padding: 8px 10px; font-size: .7rem; }
    .game-round-info { min-width: 160px; padding-inline: 12px; }
    .game-icon-button { width: 38px; height: 38px; }
    .turn-banner { width: 52vw; padding-inline: 31px; }
    .table-player { width: 140px; }
    .table-player-data { top: 32%; }
    .phase-panel { display: none; }
    .table-play-zone { left: 9%; right: 9%; }
    .hand-shell { width: 74vw; }
    .game-action-bar { max-width: calc(100vw - 12px); overflow-x: auto; justify-content: flex-start; }
    .selected-count { display: none; }
    .game-log-panel { width: 60vw; bottom: 18%; }
}

/* Feinabstimmung der beschrifteten Bereiche der gelieferten Spielerrahmen. */
.table-player-data {
    left: 57.5%;
    top: 59.5%;
    width: 33.5%;
}
.table-player-data strong { line-height: 1.15; }
.table-player-data small { display: none; }
.table-player-stats {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 10%;
}
.table-player-stats span { display: block; white-space: nowrap; }
.table-player-stats i { display: none; }
.table-player-stats span:first-child b::before { content: "P "; font-weight: 400; opacity: .7; }
.table-player-stats span:last-child b::after { content: " Pkt"; font-weight: 400; opacity: .7; }
.table-player-cards {
    left: 61%;
    bottom: auto;
    top: 28%;
    min-width: 28%;
}
/* MAERCHENPFAD_PNG_CARDS_PATCH_V1
   Vorhandene PNG-Dateien werden aus assets/cards geladen.
   Fehlt eine Datei, bleibt automatisch das bisherige CSS-Kartendesign sichtbar. */
.fairy-card .card-fallback {
    display: contents;
}

.fairy-card .card-png {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: inherit;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, .38));
}

.fairy-card.has-card-png {
    overflow: visible;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
}

.fairy-card.has-card-png::before,
.fairy-card.has-card-png .card-fallback {
    display: none;
}

.hand-card.selected .fairy-card.has-card-png {
    box-shadow: 0 0 0 2px rgba(255, 240, 167, .95), 0 0 20px rgba(255, 218, 89, .72);
}
/* MAERCHENPFAD_HANDKARTEN_40_PROZENT_PATCH_V1_START
   Vergrößert ausschließlich die Karten in der eigenen Hand um exakt 40 %.
   Nachziehstapel, Ablagestapel und bereits ausgelegte Karten bleiben unverändert. */
.hand-cards .hand-card {
    --maerchenpfad-hand-card-scale: 1.7;
    transform:
        translateY(var(--lift, 0))
        rotate(var(--fan, 0deg))
        scale(var(--maerchenpfad-hand-card-scale)) !important;
}
/* MAERCHENPFAD_HANDKARTEN_40_PROZENT_PATCH_V1_END */
/* MAERCHENPFAD_KARTEN_AUFHELLEN_PATCH_V1_START
   Die Spielvignette bleibt auf dem Tisch erhalten, liegt aber nicht mehr
   über Handkarten, Stapeln und ausgelegten Karten. PNG-Karten werden ohne
   Abdunklung, Transparenz oder Mischmodus dargestellt. */

/* Handkarten samt goldenem Handrahmen oberhalb der dunklen Vignette */
.game-screen .hand-shell {
    z-index: 68 !important;
    isolation: isolate;
}

/* Nachziehstapel, Ablagestapel und ausgelegte Phasen oberhalb der Vignette */
.game-screen .table-play-zone {
    z-index: 64 !important;
    isolation: isolate;
}

/* PNG-Grafik unverfälscht und in voller Helligkeit anzeigen */
.game-screen .fairy-card .card-png {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
}

/* Der PNG-Kartenbehälter darf selbst ebenfalls nicht abgedunkelt werden */
.game-screen .fairy-card.has-card-png {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    background: transparent !important;
    text-shadow: none !important;
}

/* Verhindert zusätzliche dunkle Ebenen auf vorhandenen PNG-Karten */
.game-screen .fairy-card.has-card-png::before,
.game-screen .fairy-card.has-card-png::after {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

/* Deaktivierte Stapel bleiben funktional gesperrt, werden aber nicht dunkel */
.game-screen .card-pile:disabled {
    opacity: 1 !important;
    filter: none !important;
}

/* MAERCHENPFAD_KARTEN_AUFHELLEN_PATCH_V1_END */
/* MAERCHENPFAD_KARTEN_MAGISCH_HELL_V1_START
   Kräftige, helle Spielkarten mit dezentem märchenhaftem Leuchten. */

/* PNG-Karten */
.game-screen .fairy-card.has-card-png .card-png,
.game-screen .fairy-card .card-png,
.game-screen .hand-shell .fairy-card img,
.game-screen .table-play-zone .fairy-card img {
    opacity: 1 !important;
    filter:
        brightness(1.30)
        contrast(1.08)
        saturate(1.22)
        drop-shadow(0 0 4px rgba(255, 225, 145, .40))
        drop-shadow(0 0 9px rgba(255, 184, 64, .18)) !important;
    mix-blend-mode: normal !important;
    transition:
        filter .18s ease,
        transform .18s ease,
        box-shadow .18s ease !important;
}

/* Auch das bisherige CSS-Kartendesign heller darstellen,
   falls für eine Karte keine PNG-Datei vorhanden ist. */
.game-screen .fairy-card:not(.has-card-png) {
    opacity: 1 !important;
    filter:
        brightness(1.20)
        contrast(1.06)
        saturate(1.16)
        drop-shadow(0 0 5px rgba(255, 221, 136, .28)) !important;
}

/* Handkarten erhalten einen klaren, goldenen Lichtsaum. */
.game-screen .hand-shell .fairy-card {
    box-shadow:
        0 8px 18px rgba(0, 0, 0, .52),
        0 0 7px rgba(255, 212, 103, .30),
        inset 0 0 1px rgba(255, 255, 255, .42) !important;
}

/* Beim Darüberfahren beziehungsweise Antippen etwas stärkeres Leuchten. */
.game-screen .hand-shell .fairy-card:hover,
.game-screen .hand-shell .fairy-card:focus-visible,
.game-screen .hand-shell .fairy-card.is-selected,
.game-screen .hand-shell .fairy-card.selected {
    filter:
        brightness(1.10)
        contrast(1.05)
        saturate(1.10)
        drop-shadow(0 0 7px rgba(255, 237, 177, .72))
        drop-shadow(0 0 15px rgba(255, 177, 42, .40)) !important;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, .55),
        0 0 11px rgba(255, 226, 142, .58),
        0 0 22px rgba(255, 174, 45, .25) !important;
}

/* Bei PNG-Karten muss die Aufhellung auf dem Bild selbst erhalten bleiben,
   auch wenn die Karte ausgewählt ist. */
.game-screen .hand-shell .fairy-card:hover .card-png,
.game-screen .hand-shell .fairy-card:focus-visible .card-png,
.game-screen .hand-shell .fairy-card.is-selected .card-png,
.game-screen .hand-shell .fairy-card.selected .card-png {
    filter:
        brightness(1.38)
        contrast(1.10)
        saturate(1.28)
        drop-shadow(0 0 5px rgba(255, 241, 196, .68))
        drop-shadow(0 0 12px rgba(255, 179, 53, .32)) !important;
}

/* Deaktivierte Karten bleiben optisch hell, aber weiterhin nicht anklickbar. */
.game-screen .fairy-card:disabled,
.game-screen .card-pile:disabled {
    opacity: 1 !important;
}

/* MAERCHENPFAD_KARTEN_MAGISCH_HELL_V1_END */
/* MAERCHENPFAD_HANDKARTEN_GROESSER_HELLER_V2_START
   Handkarten auf 155 % und PNGs nochmals heller. */

/* Etwas größer als der bisherige 140-%-Patch */
.game-screen .hand-cards .hand-card,
.hand-cards .hand-card {
    --maerchenpfad-hand-card-scale: 1.55 !important;
    transform:
        translateY(var(--lift, 0))
        rotate(var(--fan, 0deg))
        scale(var(--maerchenpfad-hand-card-scale)) !important;
    transform-origin: center bottom !important;
}

/* PNG-Handkarten sichtbar heller und farbkräftiger */
.game-screen .hand-cards .hand-card.has-card-png .card-png,
.game-screen .hand-cards .hand-card .card-png,
.hand-cards .hand-card.has-card-png .card-png,
.hand-cards .hand-card .card-png {
    opacity: 1 !important;
    filter:
        brightness(1.42)
        contrast(1.09)
        saturate(1.26)
        drop-shadow(0 0 5px rgba(255, 239, 188, .52))
        drop-shadow(0 0 12px rgba(255, 181, 48, .24)) !important;
    mix-blend-mode: normal !important;
}

/* Ersatzkarten ohne PNG ebenfalls aufhellen */
.game-screen .hand-cards .hand-card:not(.has-card-png),
.hand-cards .hand-card:not(.has-card-png) {
    opacity: 1 !important;
    filter:
        brightness(1.29)
        contrast(1.07)
        saturate(1.20)
        drop-shadow(0 0 6px rgba(255, 220, 132, .34)) !important;
}

/* Klarerer Lichtsaum um jede Handkarte */
.game-screen .hand-cards .hand-card,
.hand-cards .hand-card {
    box-shadow:
        0 10px 22px rgba(0, 0, 0, .54),
        0 0 8px rgba(255, 220, 126, .38),
        0 0 16px rgba(255, 173, 43, .15),
        inset 0 0 1px rgba(255, 255, 255, .55) !important;
}

/* Beim Auswählen nur etwas stärker – nicht überstrahlt */
.game-screen .hand-cards .hand-card:hover .card-png,
.game-screen .hand-cards .hand-card:focus-visible .card-png,
.game-screen .hand-cards .hand-card.is-selected .card-png,
.game-screen .hand-cards .hand-card.selected .card-png,
.hand-cards .hand-card:hover .card-png,
.hand-cards .hand-card:focus-visible .card-png,
.hand-cards .hand-card.is-selected .card-png,
.hand-cards .hand-card.selected .card-png {
    filter:
        brightness(1.50)
        contrast(1.10)
        saturate(1.30)
        drop-shadow(0 0 6px rgba(255, 245, 211, .72))
        drop-shadow(0 0 15px rgba(255, 177, 42, .38)) !important;
}

/* Deaktivierte Handkarten bleiben hell */
.game-screen .hand-cards .hand-card:disabled,
.hand-cards .hand-card:disabled {
    opacity: 1 !important;
}

/* MAERCHENPFAD_HANDKARTEN_GROESSER_HELLER_V2_END */

/* MAERCHENPFAD_MOBILE_STABILITAET_V1_START */
html,
body {
    overscroll-behavior-x: none;
}
body.game-active {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}
.game-screen {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto;
    touch-action: manipulation;
}
.game-screen button,
.game-screen .hand-card,
.game-screen .card-pile {
    touch-action: manipulation;
}
@media (pointer: coarse) {
    .game-particle-field { opacity: .72; }
    .game-screen { -webkit-user-select: none; user-select: none; }
}
/* MAERCHENPFAD_MOBILE_STABILITAET_V1_END */
/* MAERCHENPFAD_30_AVATARE_CSS_V1
   Übersichtliche Auswahl für 30 nummerierte Avatar-PNGs. */
.avatar-grid {
    grid-template-columns: repeat(6, minmax(58px, 1fr)) !important;
    max-height: min(52vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 8px 6px 3px;
    scrollbar-width: thin;
}

.avatar-option {
    overflow: hidden;
    min-width: 0;
}

.avatar-option img,
.profile-avatar-large,
.table-player-avatar,
.mini-avatars img,
.avatar-stack img,
.rank-player img,
.podium-place img,
.participant img,
.winner-row img {
    object-fit: cover !important;
    object-position: center !important;
}

@media (max-width: 760px) {
    .avatar-grid {
        grid-template-columns: repeat(4, minmax(54px, 1fr)) !important;
        max-height: 48vh;
    }
}
/* MAERCHENPFAD_30_AVATARE_CSS_V1_END */
/* MAERCHENPFAD_HANDRAHMEN_AVATAR_FIT_V1_START
   Handrahmen enger an die Karten + Avatare sauber im Rahmen ausrichten. */

/* -------------------------------------------------
   1) Handrahmen unten näher an die Karten bringen
   ------------------------------------------------- */

.game-screen .hand-shell,
.hand-shell {
    padding-bottom: 0 !important;
    min-height: auto !important;
}

.game-screen .hand-shell .hand-cards,
.game-screen .hand-cards,
.hand-shell .hand-cards {
    margin-top: -10px !important;
    margin-bottom: -8px !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    align-items: flex-end !important;
    justify-content: center !important;
}

.game-screen .hand-shell .hand-content,
.game-screen .hand-shell .hand-inner,
.game-screen .hand-shell .hand-body,
.game-screen .hand-shell .hand-frame-inner,
.game-screen .hand-shell .hand-cards-wrap,
.hand-shell .hand-content,
.hand-shell .hand-inner,
.hand-shell .hand-body,
.hand-shell .hand-frame-inner,
.hand-shell .hand-cards-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.game-screen .hand-shell .hand-title,
.hand-shell .hand-title {
    margin-bottom: 0 !important;
}

.game-screen .hand-shell .hand-cards .hand-card,
.game-screen .hand-cards .hand-card,
.hand-shell .hand-cards .hand-card {
    transform-origin: center bottom !important;
}

/* Falls die Buttons den Bereich unnötig auseinanderziehen */
.game-screen .hand-actions,
.hand-actions {
    margin-top: 2px !important;
}

/* -------------------------------------------------
   2) Avatare sauber passend im Rahmen darstellen
   ------------------------------------------------- */

.profile-avatar-large,
.profile-avatar,
.table-player-avatar,
.player-avatar,
.avatar-frame,
.avatar-shell,
.avatar-preview,
.opponent .opp-avatar,
#heroAvatar,
.participant .participant-avatar,
.rank-player .avatar,
.podium-place .avatar,
.mini-avatars .avatar,
.avatar-stack .avatar {
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center 20% !important;
}

/* Sämtliche bekannten Avatar-Bilder sauber in den Rahmen schneiden */
.profile-avatar-large img,
.profile-avatar img,
.table-player-avatar img,
.player-avatar img,
.avatar-frame img,
.avatar-shell img,
.avatar-preview img,
.opponent .opp-avatar img,
#heroAvatar img,
.participant .participant-avatar img,
.participant img,
.rank-player img,
.rank-player .avatar img,
.podium-place img,
.podium-place .avatar img,
.mini-avatars img,
.avatar-stack img,
.avatar-option img,
.room-player img,
.room-card img,
.winner-row img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    border-radius: inherit !important;
    display: block !important;
    transform: scale(1.08) !important;
}

/* Spieltisch-Avatare etwas genauer im Fokus */
.game-screen .table-player-avatar img,
.game-screen .player-avatar img,
.game-screen .opponent .opp-avatar img,
.game-screen #heroAvatar img {
    object-position: center 16% !important;
    transform: scale(1.10) !important;
}

/* Runde Container für kreisförmige Märchenrahmen */
.profile-avatar-large,
.profile-avatar,
.table-player-avatar,
.player-avatar,
.opponent .opp-avatar,
#heroAvatar {
    border-radius: 999px !important;
}

/* MAERCHENPFAD_HANDRAHMEN_AVATAR_FIT_V1_END */
/* MAERCHENPFAD_SPIELERINFOS_SICHTBARER_V1_START
   Lesbare Namen, Phasen, Punkte und Kartenanzahl in den Spielerrahmen.
   Die Avatar-Geometrie wird bewusst nicht verändert. */

/* Informationsbereich oberhalb von Avatar und Rahmenbild halten */
.game-screen .table-player-data,
.table-player-data {
    z-index: 8 !important;
    left: 55.5% !important;
    top: 52.5% !important;
    width: 38.5% !important;
    display: grid !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #fff7df !important;
    text-shadow:
        0 2px 2px rgba(0, 0, 0, 1),
        0 0 5px rgba(0, 0, 0, .98),
        0 0 9px rgba(0, 0, 0, .88) !important;
    pointer-events: none !important;
}

/* Deutlich sichtbare Namensplakette */
.game-screen .table-player-data > strong,
.table-player-data > strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 6px 5px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    border: 1px solid rgba(255, 213, 112, .66) !important;
    border-radius: 8px !important;
    color: #fff4cf !important;
    background:
        linear-gradient(
            180deg,
            rgba(34, 22, 16, .96),
            rgba(8, 8, 12, .95)
        ) !important;
    box-shadow:
        inset 0 0 8px rgba(255, 204, 86, .11),
        0 2px 8px rgba(0, 0, 0, .72) !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.78rem, 1.02vw, 1.05rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: .01em !important;
}

/* Die alte Unterzeile bleibt ausgeblendet, damit der Rahmen nicht überfüllt wird */
.game-screen .table-player-data > small,
.table-player-data > small {
    display: none !important;
}

/* Phase und Punkte als zwei deutlich getrennte Plaketten */
.game-screen .table-player-stats,
.table-player-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff5d7 !important;
    font-size: clamp(.59rem, .72vw, .78rem) !important;
    line-height: 1 !important;
}

.game-screen .table-player-stats span,
.table-player-stats span {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    min-width: 0 !important;
    padding: 3px 2px 4px !important;
    border: 1px solid rgba(255, 205, 97, .54) !important;
    border-radius: 7px !important;
    white-space: nowrap !important;
    color: #fff1c9 !important;
    background:
        linear-gradient(
            180deg,
            rgba(41, 24, 15, .96),
            rgba(9, 8, 12, .96)
        ) !important;
    box-shadow:
        inset 0 0 7px rgba(255, 195, 68, .09),
        0 2px 7px rgba(0, 0, 0, .68) !important;
}

/* Beschriftung wieder vollständig anzeigen */
.game-screen .table-player-stats i,
.table-player-stats i {
    display: block !important;
    margin-bottom: 2px !important;
    color: #e8bd68 !important;
    font-family: Arial, sans-serif !important;
    font-size: clamp(.43rem, .48vw, .53rem) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.game-screen .table-player-stats b,
.table-player-stats b {
    display: block !important;
    color: #fff8e8 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.68rem, .82vw, .88rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Alte P-/Pkt-Pseudotexte entfernen, da die Bezeichnungen nun sichtbar sind */
.game-screen .table-player-stats span:first-child b::before,
.table-player-stats span:first-child b::before,
.game-screen .table-player-stats span:last-child b::after,
.table-player-stats span:last-child b::after {
    content: none !important;
    display: none !important;
}

/* Kartenanzahl oben rechts deutlicher darstellen */
.game-screen .table-player-cards,
.table-player-cards {
    z-index: 9 !important;
    left: 59% !important;
    top: 26.5% !important;
    bottom: auto !important;
    min-width: 31% !important;
    padding: 4px 7px !important;
    border: 1px solid rgba(255, 218, 126, .72) !important;
    border-radius: 8px !important;
    color: #fff7df !important;
    background:
        linear-gradient(
            180deg,
            rgba(35, 24, 18, .97),
            rgba(6, 7, 11, .96)
        ) !important;
    box-shadow:
        inset 0 0 8px rgba(255, 201, 82, .10),
        0 2px 8px rgba(0, 0, 0, .75) !important;
    text-align: center !important;
    text-shadow:
        0 2px 2px #000,
        0 0 5px #000 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.59rem, .70vw, .76rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
}

/* Der Rahmen selbst bleibt dekorativ, liegt aber unter den Beschriftungen */
.game-screen .table-player-frame,
.table-player-frame {
    z-index: 4 !important;
}

/* Kleinere Fenster: Lesbarkeit erhalten, ohne Rahmen zu sprengen */
@media (max-width: 1100px), (max-height: 720px) {
    .game-screen .table-player-data,
    .table-player-data {
        left: 55% !important;
        top: 51.5% !important;
        width: 39% !important;
        gap: 3px !important;
    }

    .game-screen .table-player-data > strong,
    .table-player-data > strong {
        padding: 3px 4px !important;
        font-size: clamp(.67rem, .9vw, .84rem) !important;
    }

    .game-screen .table-player-stats,
    .table-player-stats {
        gap: 3px !important;
    }

    .game-screen .table-player-stats span,
    .table-player-stats span {
        padding: 2px 1px 3px !important;
    }

    .game-screen .table-player-cards,
    .table-player-cards {
        left: 59% !important;
        top: 25.5% !important;
        padding: 3px 5px !important;
    }
}

@media (max-width: 760px) {
    .game-screen .table-player-data,
    .table-player-data {
        left: 54.5% !important;
        top: 50.5% !important;
        width: 40% !important;
    }

    .game-screen .table-player-data > strong,
    .table-player-data > strong {
        font-size: .67rem !important;
    }

    .game-screen .table-player-stats i,
    .table-player-stats i {
        font-size: .37rem !important;
    }

    .game-screen .table-player-stats b,
    .table-player-stats b {
        font-size: .58rem !important;
    }

    .game-screen .table-player-cards,
    .table-player-cards {
        font-size: .54rem !important;
    }
}

/* MAERCHENPFAD_SPIELERINFOS_SICHTBARER_V1_END */
/* MAERCHENPFAD_TURN_NOTICE_3S_CSS_V1 */
.turn-banner,
.turn-notice,
.game-turn-banner,
[data-turn-banner],
#turnBanner,
#turnNotice {
    transition: opacity .24s ease, transform .24s ease, visibility .24s ease !important;
    pointer-events: none !important;
}

.mp-turn-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.mp-turn-leaving {
    opacity: 0 !important;
    visibility: visible !important;
    transform: translateY(-10px) scale(.985) !important;
}

.mp-turn-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) scale(.985) !important;
}
/* MAERCHENPFAD_TURN_NOTICE_3S_CSS_V1_END */

/* MAERCHENPFAD_TISCH_STAPEL_LINKS_V1_START
   Nachzieh- und Ablagestapel links, freie Spielfläche in der Mitte. */

/*
 * Die Spielfläche erhält einen festen inneren Arbeitsbereich:
 * links die beiden Stapel, rechts davon ausschließlich die Auslagen.
 */
#gameScreen.game-screen .table-play-zone,
.game-screen .table-play-zone {
    position: absolute !important;
    z-index: 64 !important;
    left: 18% !important;
    right: 15% !important;
    top: 18.5% !important;
    bottom: 27.5% !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: none !important;
    isolation: isolate;
}

/* Stapel als kompakter gemeinsamer Block auf der linken Tischseite. */
#gameScreen.game-screen .table-play-zone > .draw-zone,
.game-screen .table-play-zone > .draw-zone {
    position: absolute !important;
    z-index: 8 !important;
    left: 1.5% !important;
    top: 47% !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: 26% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.15vw, 24px) !important;
    transform: translateY(-50%) !important;
    transform-origin: left center !important;
    pointer-events: auto !important;
}

/* Alte Zentrierungen der einzelnen Stapel sicher neutralisieren. */
#gameScreen.game-screen .draw-zone > #deckPile,
#gameScreen.game-screen .draw-zone > #discardPile,
.game-screen .draw-zone > #deckPile,
.game-screen .draw-zone > #discardPile {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    flex: 0 0 auto !important;
    pointer-events: auto !important;
}

/*
 * Der komplette mittlere und rechte Tischbereich gehört den ausgelegten
 * Phasen. Dadurch können die Reihen wachsen, ohne die Stapel zu überdecken.
 */
#gameScreen.game-screen #meldArea.meld-area,
.game-screen #meldArea.meld-area {
    position: absolute !important;
    z-index: 5 !important;
    left: 27% !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(8px, 1.2vw, 22px) clamp(4px, .7vw, 14px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;
    gap: clamp(8px, 1.2vh, 16px) !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

/* Auslagen dürfen die jetzt breitere Mittelfläche vollständig nutzen. */
#gameScreen.game-screen #meldArea .table-meld,
.game-screen #meldArea .table-meld {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Große Widescreen-Displays: Stapel etwas weiter nach links und größer. */
@media (min-width: 1600px) and (min-aspect-ratio: 16 / 10) {
    #gameScreen.game-screen .table-play-zone,
    .game-screen .table-play-zone {
        left: 17% !important;
        right: 14% !important;
        top: 18% !important;
        bottom: 27% !important;
    }

    #gameScreen.game-screen .table-play-zone > .draw-zone,
    .game-screen .table-play-zone > .draw-zone {
        left: 0 !important;
        top: 48% !important;
    }

    #gameScreen.game-screen #meldArea.meld-area,
    .game-screen #meldArea.meld-area {
        left: 26% !important;
    }
}

/* Tablet und kleinere Desktopfenster im Querformat. */
@media (max-width: 1199px) and (orientation: landscape) {
    #gameScreen.game-screen .table-play-zone,
    .game-screen .table-play-zone {
        left: 10% !important;
        right: 6% !important;
        top: 18% !important;
        bottom: 29% !important;
    }

    #gameScreen.game-screen .table-play-zone > .draw-zone,
    .game-screen .table-play-zone > .draw-zone {
        left: 0 !important;
        top: 45% !important;
        gap: 8px !important;
        transform: translateY(-50%) scale(.84) !important;
    }

    #gameScreen.game-screen #meldArea.meld-area,
    .game-screen #meldArea.meld-area {
        left: 28% !important;
        padding: 5px !important;
        gap: 7px !important;
    }
}

/* Smartphones im Querformat: weiterhin links, aber platzsparend. */
@media (max-width: 900px) and (orientation: landscape) {
    #gameScreen.game-screen .table-play-zone,
    .game-screen .table-play-zone {
        left: 5% !important;
        right: 3% !important;
        top: 17% !important;
        bottom: 28% !important;
    }

    #gameScreen.game-screen .table-play-zone > .draw-zone,
    .game-screen .table-play-zone > .draw-zone {
        left: 0 !important;
        top: 43% !important;
        transform: translateY(-50%) scale(.68) !important;
    }

    #gameScreen.game-screen #meldArea.meld-area,
    .game-screen #meldArea.meld-area {
        left: 25% !important;
        top: -2% !important;
        bottom: -2% !important;
        gap: 4px !important;
    }
}

/* Im Hochformat keine erzwungene Verschiebung hinter dem Drehhinweis. */
@media (orientation: portrait) and (max-width: 900px) {
    #gameScreen.game-screen .table-play-zone,
    .game-screen .table-play-zone {
        pointer-events: none !important;
    }
}

/* MAERCHENPFAD_TISCH_STAPEL_LINKS_V1_END */

/* MAERCHENPFAD_ULTI_PHASE_LAYOUT_V1_START
   Ultimativer Phasen-Look: größere, hellere Auslagen vor jedem Spieler. */

#gameScreen.game-screen .table-play-zone,
.game-screen .table-play-zone {
    left: 9.5% !important;
    right: 8.5% !important;
    top: 14.5% !important;
    bottom: 23.5% !important;
    overflow: visible !important;
}

#gameScreen.game-screen #meldArea.meld-area,
.game-screen #meldArea.meld-area {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: visible !important;
    display: block !important;
    isolation: isolate;
}

/* Die ursprünglichen Meld-Elemente bleiben funktional,
   werden aber künftig von Seat-Zonen sauber aufgenommen. */
#gameScreen.game-screen #meldArea .table-meld,
.game-screen #meldArea .table-meld {
    position: relative !important;
    margin: 0 !important;
    max-width: none !important;
    pointer-events: auto !important;
    transform-origin: center center !important;
}

/* Dynamische Sitz-Zonen */
#gameScreen.game-screen #meldArea .mp-seat-zone,
.game-screen #meldArea .mp-seat-zone {
    position: absolute !important;
    z-index: 8 !important;
    display: flex !important;
    gap: clamp(10px, 1vw, 18px) !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    min-width: 160px;
    max-width: 34%;
}

#gameScreen.game-screen #meldArea .mp-seat-zone > .table-meld,
.game-screen #meldArea .mp-seat-zone > .table-meld {
    pointer-events: auto !important;
}

/* Sitzpositionen um den Tisch */
#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="top"],
.game-screen #meldArea .mp-seat-zone[data-seat="top"] {
    left: 50% !important;
    top: 2.2% !important;
    transform: translateX(-50%) !important;
    flex-direction: column !important;
    max-width: 40% !important;
}

#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="upper-left"],
.game-screen #meldArea .mp-seat-zone[data-seat="upper-left"] {
    left: 3.6% !important;
    top: 15.5% !important;
    transform: rotate(-13deg) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 28% !important;
}

#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="lower-left"],
.game-screen #meldArea .mp-seat-zone[data-seat="lower-left"] {
    left: 7.2% !important;
    bottom: 20.5% !important;
    transform: rotate(-8deg) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 29% !important;
}

#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="upper-right"],
.game-screen #meldArea .mp-seat-zone[data-seat="upper-right"] {
    right: 3.6% !important;
    top: 15.5% !important;
    transform: rotate(13deg) !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    max-width: 28% !important;
}

#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="lower-right"],
.game-screen #meldArea .mp-seat-zone[data-seat="lower-right"] {
    right: 7.2% !important;
    bottom: 20.5% !important;
    transform: rotate(8deg) !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    max-width: 29% !important;
}

#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="bottom"],
.game-screen #meldArea .mp-seat-zone[data-seat="bottom"] {
    left: 50% !important;
    bottom: 16.5% !important;
    transform: translateX(-50%) !important;
    flex-direction: column !important;
    max-width: 40% !important;
}

/* Premium-Look für die Phasen-Container */
#gameScreen.game-screen #meldArea .table-meld.mp-seat-meld,
.game-screen #meldArea .table-meld.mp-seat-meld {
    --mp-meld-scale: 1.12;
    padding: 12px 14px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255, 214, 119, .42) !important;
    background:
        linear-gradient(180deg, rgba(58, 43, 22, .92), rgba(23, 17, 10, .90)) !important;
    box-shadow:
        0 18px 38px rgba(0, 0, 0, .36),
        0 0 0 1px rgba(255, 236, 185, .06) inset,
        0 0 22px rgba(245, 188, 77, .12) !important;
    backdrop-filter: blur(3px);
    filter: brightness(1.10) saturate(1.08) !important;
    transform: scale(var(--mp-meld-scale)) !important;
    transform-origin: center center !important;
}

/* Besitzer-/Phasentitel lesbarer machen */
#gameScreen.game-screen #meldArea .table-meld .meld-label,
#gameScreen.game-screen #meldArea .table-meld .meld-title,
#gameScreen.game-screen #meldArea .table-meld .meld-owner,
#gameScreen.game-screen #meldArea .table-meld [class*="meld-label"],
#gameScreen.game-screen #meldArea .table-meld [class*="meld-title"],
.game-screen #meldArea .table-meld .meld-label,
.game-screen #meldArea .table-meld .meld-title,
.game-screen #meldArea .table-meld .meld-owner,
.game-screen #meldArea .table-meld [class*="meld-label"],
.game-screen #meldArea .table-meld [class*="meld-title"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(18, 23, 31, .92), rgba(7, 10, 17, .88)) !important;
    border: 1px solid rgba(255, 222, 146, .24) !important;
    color: #ffe9ae !important;
    text-shadow: 0 1px 5px rgba(0,0,0,.8) !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    font-size: clamp(10px, .65vw, 13px) !important;
    text-transform: uppercase !important;
}

/* Karten in den fertigen Phasen etwas größer und klarer */
#gameScreen.game-screen #meldArea .mp-seat-meld img,
#gameScreen.game-screen #meldArea .mp-seat-meld canvas,
#gameScreen.game-screen #meldArea .mp-seat-meld [class*="card"],
#gameScreen.game-screen #meldArea .mp-seat-meld [class*="tile"],
.game-screen #meldArea .mp-seat-meld img,
.game-screen #meldArea .mp-seat-meld canvas,
.game-screen #meldArea .mp-seat-meld [class*="card"],
.game-screen #meldArea .mp-seat-meld [class*="tile"] {
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.32)) brightness(1.06) !important;
}

/* Optischer Goldschimmer je nach Sitzrichtung */
#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="upper-left"] .mp-seat-meld,
#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="lower-left"] .mp-seat-meld,
.game-screen #meldArea .mp-seat-zone[data-seat="upper-left"] .mp-seat-meld,
.game-screen #meldArea .mp-seat-zone[data-seat="lower-left"] .mp-seat-meld {
    box-shadow:
        0 18px 38px rgba(0, 0, 0, .36),
        -14px 0 24px rgba(255, 190, 84, .12),
        0 0 0 1px rgba(255, 236, 185, .06) inset !important;
}

#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="upper-right"] .mp-seat-meld,
#gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="lower-right"] .mp-seat-meld,
.game-screen #meldArea .mp-seat-zone[data-seat="upper-right"] .mp-seat-meld,
.game-screen #meldArea .mp-seat-zone[data-seat="lower-right"] .mp-seat-meld {
    box-shadow:
        0 18px 38px rgba(0, 0, 0, .36),
        14px 0 24px rgba(255, 190, 84, .12),
        0 0 0 1px rgba(255, 236, 185, .06) inset !important;
}

/* Mobile/kleinere Fenster */
@media (max-width: 1366px) and (orientation: landscape) {
    #gameScreen.game-screen .table-play-zone,
    .game-screen .table-play-zone {
        left: 7% !important;
        right: 6% !important;
        top: 15% !important;
        bottom: 24.5% !important;
    }

    #gameScreen.game-screen #meldArea .mp-seat-zone,
    .game-screen #meldArea .mp-seat-zone {
        gap: 10px !important;
    }

    #gameScreen.game-screen #meldArea .table-meld.mp-seat-meld,
    .game-screen #meldArea .table-meld.mp-seat-meld {
        --mp-meld-scale: .96;
        padding: 8px 10px !important;
        border-radius: 14px !important;
    }

    #gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="upper-left"],
    .game-screen #meldArea .mp-seat-zone[data-seat="upper-left"] {
        left: 1% !important;
        top: 17% !important;
    }

    #gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="upper-right"],
    .game-screen #meldArea .mp-seat-zone[data-seat="upper-right"] {
        right: 1% !important;
        top: 17% !important;
    }

    #gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="lower-left"],
    .game-screen #meldArea .mp-seat-zone[data-seat="lower-left"] {
        left: 3.4% !important;
        bottom: 21.5% !important;
    }

    #gameScreen.game-screen #meldArea .mp-seat-zone[data-seat="lower-right"],
    .game-screen #meldArea .mp-seat-zone[data-seat="lower-right"] {
        right: 3.4% !important;
        bottom: 21.5% !important;
    }
}

@media (max-width: 980px) and (orientation: landscape) {
    #gameScreen.game-screen #meldArea .mp-seat-zone,
    .game-screen #meldArea .mp-seat-zone {
        max-width: 31% !important;
        gap: 6px !important;
    }

    #gameScreen.game-screen #meldArea .table-meld.mp-seat-meld,
    .game-screen #meldArea .table-meld.mp-seat-meld {
        --mp-meld-scale: .82;
        padding: 6px 8px !important;
    }
}

@media (orientation: portrait) and (max-width: 1000px) {
    #gameScreen.game-screen #meldArea,
    .game-screen #meldArea {
        pointer-events: none !important;
    }
}

/* MAERCHENPFAD_ULTI_PHASE_LAYOUT_V1_END */

/* /* MAERCHENPFAD_CHRONIK_SIEGER_FIX_V1_START
   Chronik-/Siegerbildschirm Komplett-Fix */

.mp-chronicle-victory-screen {
    width: min(1080px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 24px) !important;
    margin: 10px auto !important;
    padding: clamp(20px, 2.4vw, 34px) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 209, 111, .22) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(66, 44, 106, .26), transparent 34%),
        linear-gradient(180deg, rgba(24, 16, 43, .97), rgba(11, 8, 21, .98)) !important;
    box-shadow:
        0 34px 80px rgba(0, 0, 0, .50),
        0 0 0 1px rgba(255, 244, 219, .04) inset,
        0 0 55px rgba(126, 59, 255, .08) inset !important;
    overflow: hidden !important;
}

.mp-chronicle-victory-screen .mp-victory-crown {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

.mp-chronicle-victory-screen .mp-victory-crown img,
.mp-chronicle-victory-screen .mp-victory-crown svg,
.mp-chronicle-victory-screen .mp-victory-crown span {
    max-width: 74px !important;
    max-height: 74px !important;
}

.mp-chronicle-victory-screen .mp-victory-kicker {
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-weight: 800 !important;
    color: #e2bc67 !important;
    font-size: clamp(12px, 1.05vw, 18px) !important;
    margin: 0 0 10px !important;
}

.mp-chronicle-victory-screen .mp-victory-title {
    text-align: center !important;
    margin: 0 auto 18px !important;
    max-width: 14ch !important;
    color: #fff7ea !important;
    font-weight: 900 !important;
    line-height: .96 !important;
    font-size: clamp(42px, 6.2vw, 86px) !important;
    text-wrap: balance;
    text-shadow: 0 5px 18px rgba(0, 0, 0, .28) !important;
}

.mp-chronicle-victory-screen .mp-victory-subtitle {
    max-width: 860px !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
    color: rgba(255, 246, 232, .92) !important;
    font-size: clamp(16px, 1.55vw, 26px) !important;
    line-height: 1.45 !important;
}

.mp-chronicle-ranking-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    max-height: min(56vh, 980px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px !important;
    margin-top: 8px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(243, 201, 95, .55) rgba(255,255,255,.06);
}

.mp-chronicle-ranking-list::-webkit-scrollbar {
    width: 10px;
}

.mp-chronicle-ranking-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05);
    border-radius: 999px;
}

.mp-chronicle-ranking-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,211,120,.86), rgba(206,138,41,.86));
    border-radius: 999px;
}

.mp-chronicle-rank-card {
    display: grid !important;
    grid-template-columns: 52px clamp(110px, 16vw, 184px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(12px, 1.5vw, 22px) !important;
    min-height: clamp(130px, 19vw, 202px) !important;
    padding: clamp(14px, 1.4vw, 20px) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 223, 159, .09) !important;
    background:
        linear-gradient(180deg, rgba(34, 27, 54, .88), rgba(24, 18, 39, .94)) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, .28),
        0 0 0 1px rgba(255, 248, 237, .03) inset !important;
}

.mp-chronicle-rank-card[data-rank="1"] {
    border-color: rgba(255, 219, 119, .28) !important;
    background:
        radial-gradient(circle at 18% 50%, rgba(255, 195, 77, .10), transparent 28%),
        linear-gradient(180deg, rgba(41, 31, 59, .92), rgba(25, 19, 40, .95)) !important;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(255, 240, 202, .05) inset,
        0 0 24px rgba(255, 199, 82, .10) !important;
}

.mp-chronicle-rank-index {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    color: #fff7e5 !important;
    font-size: clamp(26px, 2.3vw, 38px) !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.30) !important;
}

.mp-chronicle-rank-avatar {
    width: 100% !important;
    max-width: clamp(110px, 16vw, 184px) !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 227, 177, .20) !important;
    background: rgba(255,255,255,.05) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24) !important;
}

.mp-chronicle-rank-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.mp-chronicle-rank-content {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
}

.mp-chronicle-rank-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.mp-chronicle-rank-name {
    min-width: 0 !important;
    color: #fff9f0 !important;
    font-weight: 900 !important;
    font-size: clamp(24px, 2.35vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.01em !important;
    text-shadow: 0 3px 12px rgba(0,0,0,.24) !important;
    overflow-wrap: anywhere;
}

.mp-chronicle-rank-points {
    flex: 0 0 auto !important;
    color: #fff1cf !important;
    font-weight: 900 !important;
    font-size: clamp(24px, 2.25vw, 38px) !important;
    white-space: nowrap !important;
}

.mp-chronicle-rank-meta {
    color: rgba(255, 240, 209, .82) !important;
    font-size: clamp(16px, 1.4vw, 24px) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .mp-chronicle-victory-screen {
        width: min(100vw - 18px, 1000px) !important;
        max-height: calc(100vh - 12px) !important;
        padding: 16px !important;
        border-radius: 20px !important;
    }

    .mp-chronicle-victory-screen .mp-victory-title {
        font-size: clamp(34px, 9vw, 58px) !important;
        margin-bottom: 12px !important;
    }

    .mp-chronicle-victory-screen .mp-victory-subtitle {
        font-size: clamp(14px, 3.2vw, 20px) !important;
        margin-bottom: 16px !important;
    }

    .mp-chronicle-ranking-list {
        gap: 12px !important;
        max-height: 58vh !important;
    }

    .mp-chronicle-rank-card {
        grid-template-columns: 40px 92px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-height: 108px !important;
        padding: 10px !important;
        border-radius: 16px !important;
    }

    .mp-chronicle-rank-index {
        width: 40px !important;
        font-size: clamp(20px, 4.4vw, 28px) !important;
    }

    .mp-chronicle-rank-avatar {
        max-width: 92px !important;
        border-radius: 14px !important;
    }

    .mp-chronicle-rank-name,
    .mp-chronicle-rank-points {
        font-size: clamp(18px, 4.3vw, 26px) !important;
    }

    .mp-chronicle-rank-meta {
        font-size: clamp(13px, 3vw, 18px) !important;
    }
}

@media (max-width: 620px) {
    .mp-chronicle-rank-card {
        grid-template-columns: 34px 76px minmax(0, 1fr) !important;
    }
}

/* MAERCHENPFAD_CHRONIK_SIEGER_FIX_V1_END */ */

/* MAERCHENPFAD_ROOM_LIFECYCLE_V1_CSS_START */

/* Siegerfenster: klare Entscheidung nach Phase 10. */
#winnerDialog > .winner-room-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 0 !important;
}

#winnerDialog > .winner-room-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

#winnerDialog > .winner-room-actions > [data-winner-restart] {
    color: #172409 !important;
    border-color: rgba(204, 255, 150, .72) !important;
    background: linear-gradient(180deg, #d8ff9b, #78c93f) !important;
}

#winnerDialog > .winner-room-actions > [data-winner-delete] {
    color: #fff7ee !important;
    border-color: rgba(255, 155, 155, .72) !important;
    background: linear-gradient(180deg, #e25356, #9f2029) !important;
}

#winnerDialog > .winner-room-actions > [data-winner-hall] {
    grid-column: 1 / -1 !important;
}

/* Normaler Hallenraum ohne Hall-V3-Umbau. */
.room-card .mp-room-delete-safety {
    position: relative !important;
    z-index: 8 !important;
    min-height: 34px !important;
    padding: 7px 11px !important;
    color: #fff5ef !important;
    border: 1px solid rgba(255, 142, 142, .68) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #d94c51, #8d1822) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 5px 12px rgba(0,0,0,.28) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.room-card .mp-room-delete-safety:hover:not(:disabled) {
    filter: brightness(1.09) saturate(1.08) !important;
}

.room-card .mp-room-delete-safety:disabled {
    opacity: .43 !important;
    filter: grayscale(.55) !important;
    cursor: not-allowed !important;
}

/* Hall V3: Status, Raumknopf und Löschknopf passen gemeinsam rechts hinein. */
#view-hall.mp-hall-v3 .mp-room-action-v9b:has(.mp-room-delete-safety) {
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    gap: clamp(3px, .4vw, 6px) !important;
    padding: 5% 7% !important;
}

#view-hall.mp-hall-v3 .mp-room-action-v9b .mp-room-delete-safety {
    width: min(92%, 150px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: clamp(23px, 2.7vw, 31px) !important;
    margin: 0 !important;
    padding: 0 6px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #fff4ed !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.55rem, .78vw, .78rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border: 1px solid rgba(255, 138, 138, .64) !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #d94b50, #8b1721) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 3px 7px rgba(0,0,0,.30) !important;
    pointer-events: auto !important;
}

#view-hall.mp-hall-v3 .mp-room-action-v9b .mp-room-delete-safety:disabled {
    opacity: .40 !important;
    filter: grayscale(.65) !important;
    cursor: not-allowed !important;
}

@media (max-width: 700px) {
    #winnerDialog > .winner-room-actions {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    #winnerDialog > .winner-room-actions > [data-winner-hall] {
        grid-column: auto !important;
    }

    #view-hall.mp-hall-v3 .mp-room-action-v9b .mp-room-delete-safety {
        width: 100% !important;
        height: 24px !important;
        padding-inline: 3px !important;
        font-size: clamp(.43rem, 2vw, .58rem) !important;
    }
}

/* MAERCHENPFAD_ROOM_LIFECYCLE_V1_CSS_END */

/* MAERCHENPFAD_STEP12B_NATIVE_MELDS_START */

/*
 * #meldArea liegt nach dem Rendering direkt in #gameScreen und wird
 * nicht mehr durch .table-play-zone begrenzt.
 */
#gameScreen.game-screen > #meldArea.meld-area,
.game-screen > #meldArea.meld-area {
    position: absolute !important;
    z-index: 52 !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;
    transform: none !important;
}

/* Eine gemeinsame Auslage pro Spieler. */
#gameScreen .player-meld-cluster {
    --mp-meld-rotation: 0deg;

    position: absolute !important;
    z-index: 53 !important;

    left: 50%;
    top: 50%;

    width: max-content !important;
    max-width: min(590px, 44vw) !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 5px !important;

    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;

    gap: clamp(5px, .5vw, 10px) !important;

    border: 1px solid rgba(220, 172, 69, .28) !important;
    border-radius: 15px !important;

    background:
        radial-gradient(
            circle at center,
            rgba(42, 22, 46, .28),
            rgba(5, 6, 10, .10) 70%,
            transparent
        ) !important;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, .28),
        inset 0 0 14px rgba(235, 189, 76, .05)
        !important;

    transform:
        translate(-50%, -50%)
        rotate(var(--mp-meld-rotation))
        !important;

    transform-origin: center center !important;
    pointer-events: auto !important;
}

#gameScreen .player-meld-cluster[data-seat="top"] {
    --mp-meld-rotation: 180deg;
}

#gameScreen .player-meld-cluster[data-seat="left"] {
    --mp-meld-rotation: 90deg;
}

#gameScreen .player-meld-cluster[data-seat="right"] {
    --mp-meld-rotation: -90deg;
}

#gameScreen .player-meld-cluster[data-seat="bottom"] {
    --mp-meld-rotation: 0deg;
}

/* Echte klickbare Melds bleiben erhalten. */
#gameScreen .player-meld-cluster > .table-meld {
    position: relative !important;
    inset: auto !important;

    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 4px 5px 5px !important;

    display: grid !important;
    grid-template-rows: auto auto !important;
    place-items: center !important;
    gap: 3px !important;

    border: 1px solid rgba(215, 166, 62, .42) !important;
    border-radius: 11px !important;

    background:
        linear-gradient(
            180deg,
            rgba(22, 15, 26, .92),
            rgba(6, 7, 11, .88)
        ) !important;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .05)
        !important;

    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

#gameScreen .player-meld-cluster > .table-meld.can-hit {
    cursor: pointer !important;
    border-color: rgba(117, 238, 159, .82) !important;

    box-shadow:
        0 0 12px rgba(69, 225, 126, .38),
        inset 0 1px 0 rgba(255, 255, 255, .08)
        !important;
}

#gameScreen .player-meld-cluster .table-meld-label {
    display: block !important;

    max-width: 100% !important;
    margin: 0 !important;
    padding: 1px 5px !important;

    color: #f6dda7 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(.48rem, .55vw, .68rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;

    white-space: nowrap !important;
    text-align: center !important;
    text-shadow: 0 2px 4px #000 !important;
}

#gameScreen .player-meld-cluster .meld-cards {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    gap: clamp(2px, .22vw, 5px) !important;

    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

#gameScreen .player-meld-cluster .meld-card {
    display: block !important;
    flex: 0 0 auto !important;

    width: auto !important;
    height: clamp(72px, 9.2vh, 112px) !important;
    max-height: clamp(72px, 9.2vh, 112px) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

#gameScreen .player-meld-cluster .meld-card > .fairy-card,
#gameScreen .player-meld-cluster .meld-card .fairy-card {
    width: auto !important;
    height: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
    filter: none !important;
}

#gameScreen .player-meld-cluster .meld-card .card-png {
    display: block !important;

    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 100% !important;

    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;

    filter:
        brightness(1.12)
        contrast(1.04)
        saturate(1.08)
        drop-shadow(0 4px 5px rgba(0, 0, 0, .42))
        !important;
}

/*
 * Das echte Phasenpanel wird direkt über dem Handrahmen positioniert.
 */
#gameScreen > #phasePanel.phase-panel-over-hand-v12b,
#gameScreen > .phase-panel.phase-panel-over-hand-v12b {
    position: absolute !important;
    z-index: 58 !important;

    right: auto !important;
    bottom: auto !important;

    width: min(390px, 42vw) !important;
    max-width: min(390px, 42vw) !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 8px 17px 10px !important;

    text-align: center !important;

    transform: translate(-50%, -100%) !important;
    transform-origin: center bottom !important;

    border: 1px solid rgba(224, 177, 72, .56) !important;
    border-radius: 14px !important;

    background:
        linear-gradient(
            180deg,
            rgba(20, 18, 36, .97),
            rgba(7, 9, 17, .97)
        ) !important;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .06)
        !important;

    pointer-events: none !important;
}

/* Tablet und kleinere Displays */
@media (max-width: 1100px), (max-height: 720px) {
    #gameScreen .player-meld-cluster {
        max-width: min(510px, 48vw) !important;
        gap: 4px !important;
        padding: 4px !important;
    }

    #gameScreen .player-meld-cluster .meld-card {
        height: clamp(58px, 8.3vh, 86px) !important;
        max-height: clamp(58px, 8.3vh, 86px) !important;
    }

    #gameScreen .player-meld-cluster .table-meld-label {
        font-size: clamp(.42rem, .52vw, .59rem) !important;
    }

    #gameScreen > #phasePanel.phase-panel-over-hand-v12b,
    #gameScreen > .phase-panel.phase-panel-over-hand-v12b {
        width: min(330px, 39vw) !important;
        max-width: min(330px, 39vw) !important;
        padding: 6px 12px 7px !important;
        font-size: .74rem !important;
    }
}

/* Smartphones im Querformat */
@media (max-width: 900px) and (orientation: landscape) {
    #gameScreen .player-meld-cluster {
        max-width: 52vw !important;
        gap: 3px !important;
        padding: 3px !important;
        border-radius: 10px !important;
    }

    #gameScreen .player-meld-cluster > .table-meld {
        padding: 2px 3px 3px !important;
        border-radius: 8px !important;
    }

    #gameScreen .player-meld-cluster .meld-card {
        height: clamp(43px, 7.2vh, 61px) !important;
        max-height: clamp(43px, 7.2vh, 61px) !important;
    }

    #gameScreen .player-meld-cluster .table-meld-label {
        font-size: .42rem !important;
    }

    #gameScreen > #phasePanel.phase-panel-over-hand-v12b,
    #gameScreen > .phase-panel.phase-panel-over-hand-v12b {
        width: min(290px, 42vw) !important;
        max-width: min(290px, 42vw) !important;
        padding: 4px 9px 5px !important;
        font-size: .64rem !important;
    }
}

/* MAERCHENPFAD_STEP12B_NATIVE_MELDS_END */

/* MP_FAIRYTALE_DELETE_MODAL_CSS_V1 */
.mp-fairy-delete-modal{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:18px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;font-family:Georgia,"Times New Roman",serif}
.mp-fairy-delete-modal.is-open{opacity:1;visibility:visible}.mp-fairy-delete-modal.is-closing{opacity:0}
.mp-fairy-delete-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(86,47,130,.38),rgba(2,5,13,.88) 62%,rgba(0,0,0,.96));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mp-fairy-delete-panel{position:relative;width:min(520px,100%);overflow:hidden;padding:48px 36px 30px;text-align:center;color:#fff2c9;border:2px solid #b98a37;border-radius:28px;background:linear-gradient(155deg,rgba(33,19,53,.98),rgba(10,20,38,.99) 55%,rgba(29,13,27,.99));box-shadow:0 28px 90px #000,0 0 0 5px rgba(29,18,48,.9),0 0 35px rgba(181,115,255,.35),inset 0 0 42px rgba(255,210,106,.09);transform:translateY(22px) scale(.94);transition:transform .28s cubic-bezier(.2,.9,.25,1.15);outline:0}
.mp-fairy-delete-modal.is-open .mp-fairy-delete-panel{transform:translateY(0) scale(1)}
.mp-fairy-delete-panel:before,.mp-fairy-delete-panel:after{content:"";position:absolute;pointer-events:none}.mp-fairy-delete-panel:before{inset:9px;border:1px solid rgba(238,197,99,.4);border-radius:20px}.mp-fairy-delete-panel:after{left:12%;right:12%;top:0;height:3px;background:linear-gradient(90deg,transparent,#f9d77b,transparent);box-shadow:0 0 18px #f1be54}
.mp-fairy-delete-glow{position:absolute;width:260px;height:160px;left:50%;top:-100px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(179,85,255,.62),transparent 68%);filter:blur(10px);pointer-events:none}
.mp-fairy-delete-crown{position:absolute;top:13px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;font:700 26px/1 Georgia;color:#ffe397;background:radial-gradient(circle at 35% 30%,#874ed0,#32124f 68%);border:2px solid #d8ad55;box-shadow:0 0 24px rgba(188,101,255,.7),inset 0 0 12px rgba(255,255,255,.25)}
.mp-fairy-delete-x{position:absolute;z-index:2;right:15px;top:13px;width:38px;height:38px;border:1px solid rgba(225,190,112,.45);border-radius:50%;color:#ecdca8;background:rgba(6,8,18,.5);font:28px/32px system-ui;cursor:pointer}
.mp-fairy-delete-kicker{margin:13px 0 7px;color:#70d9ff;font:700 12px/1.2 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.mp-fairy-delete-panel h2{margin:0;color:#ffe8a8;font-size:clamp(27px,5vw,39px);line-height:1.08;text-shadow:0 2px 0 #5b3010,0 0 18px rgba(255,209,102,.25)}
.mp-fairy-delete-room{margin:16px auto 12px;padding:10px 16px;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;color:#d9b7ff;background:rgba(124,69,181,.18);border:1px solid rgba(185,126,239,.4);font-weight:700;font-size:18px}
.mp-fairy-delete-copy{margin:0 auto 20px;max-width:420px;color:#d8d2df;font:15px/1.55 system-ui,sans-serif}
.mp-fairy-delete-label{display:block;margin-bottom:9px;text-align:left;color:#f4e5b5;font:600 14px/1.4 system-ui,sans-serif}.mp-fairy-delete-label strong{color:#ff9e88;letter-spacing:.08em}
.mp-fairy-delete-input{box-sizing:border-box;width:100%;height:58px;padding:0 18px;border:2px solid #735b8e;border-radius:15px;outline:0;color:#fff;background:rgba(4,8,19,.72);font:700 18px/1 system-ui,sans-serif;letter-spacing:.08em;box-shadow:inset 0 0 16px rgba(0,0,0,.45);transition:.18s ease}
.mp-fairy-delete-input:focus{border-color:#47d9f1;box-shadow:0 0 0 4px rgba(36,205,232,.14),inset 0 0 16px rgba(0,0,0,.45)}.mp-fairy-delete-input.is-valid{border-color:#73df91}.mp-fairy-delete-input.is-wrong{border-color:#ef7b76;animation:mpFairyShake .25s linear}
.mp-fairy-delete-hint{min-height:20px;margin:6px 2px 2px;text-align:left;color:#ff9d93;font:13px/1.3 system-ui,sans-serif}
.mp-fairy-delete-actions{display:grid;grid-template-columns:1fr 1.15fr;gap:12px;margin-top:10px}.mp-fairy-delete-btn{min-height:54px;border-radius:14px;font:800 16px/1 system-ui,sans-serif;cursor:pointer;transition:transform .15s ease,filter .15s ease,opacity .15s ease}.mp-fairy-delete-btn:active{transform:scale(.98)}
.mp-fairy-delete-cancel{border:1px solid #846f9a;color:#f1e9fa;background:linear-gradient(#50465d,#342e40)}.mp-fairy-delete-confirm{border:1px solid #e2a259;color:#fff4db;background:linear-gradient(180deg,#c84f45,#7e1d28);box-shadow:0 8px 22px rgba(128,20,31,.35),inset 0 1px rgba(255,255,255,.25)}.mp-fairy-delete-confirm:disabled{opacity:.36;filter:grayscale(.55);cursor:not-allowed;box-shadow:none}
@keyframes mpFairyShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:600px){.mp-fairy-delete-modal{padding:12px}.mp-fairy-delete-panel{padding:45px 20px 22px;border-radius:22px}.mp-fairy-delete-actions{grid-template-columns:1fr}.mp-fairy-delete-confirm{grid-row:1}.mp-fairy-delete-copy{font-size:14px}.mp-fairy-delete-input{height:56px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.mp-fairy-delete-modal,.mp-fairy-delete-panel,.mp-fairy-delete-input{transition:none!important;animation:none!important}}

/* MAERCHENPFAD_MOBILE_PORTRAIT_FINAL_V7_START */
@media (orientation: portrait) and (max-width: 900px) {
    /* Die Viewport-Sperre gilt nur am aktiven Spieltisch. */
    html:has(body.game-active), body.game-active {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        background: #02050a !important;
    }

    body.game-active #app,
    body.game-active .app-shell,
    body.game-active main {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #gameScreen.game-screen:not(.hidden) {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147480000 !important;
        display: block !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        pointer-events: auto !important;
        transform: none !important;
        background-position: center top !important;
        background-size: auto 100% !important;
    }

    /* Die alte Querformat-Sperre vollständig neutralisieren. */
    #gameScreen.game-screen > *:not(.landscape-note) {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        pointer-events: auto !important;
    }
    #gameScreen .landscape-note { display: none !important; }
    #gameScreen .game-vignette,
    #gameScreen .game-particle-field { pointer-events: none !important; }

    /* Kopfbereich wie in einer nativen App. */
    #gameScreen .game-top-hud {
        top: max(8px, env(safe-area-inset-top)) !important;
        left: 12px !important;
        right: 12px !important;
        height: 66px !important;
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr) 96px !important;
        gap: 10px !important;
        align-items: start !important;
        z-index: 500 !important;
    }
    #gameScreen #leaveTableButton {
        grid-column: 3 !important;
        width: 96px !important;
        height: 52px !important;
        padding: 0 8px !important;
        border-radius: 16px !important;
        font-size: .78rem !important;
        line-height: 1.05 !important;
    }
    #gameScreen #leaveTableButton span { display: inline !important; }
    #gameScreen .game-round-info {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 62px !important;
        padding: 8px 10px 7px !important;
        border-radius: 0 0 24px 24px !important;
    }
    #gameScreen .game-round-info span { font-size: .68rem !important; }
    #gameScreen .game-round-info strong { font-size: 1.25rem !important; }
    #gameScreen .game-top-actions {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        display: block !important;
    }
    #gameScreen #toggleLogButton {
        display: grid !important;
        width: 58px !important;
        height: 52px !important;
        border-radius: 16px !important;
        font-size: 0 !important;
    }
    #gameScreen #toggleLogButton::before {
        content: "☰" !important;
        font-size: 1.55rem !important;
        line-height: 1 !important;
    }
    #gameScreen #fullscreenButton { display: none !important; }
    #gameScreen #turnBanner { display: none !important; }

    /* Obere Spielfigur. */
    #gameScreen .game-players { inset: 0 !important; z-index: 80 !important; }
    #gameScreen .table-player {
        width: 112px !important;
        height: 84px !important;
        aspect-ratio: auto !important;
        transform: none !important;
    }
    #gameScreen .table-player[data-seat-index="1"] {
        left: 3% !important; top: 31% !important;
    }
    #gameScreen .table-player[data-seat-index="2"] {
        left: 50% !important; top: 76px !important;
        transform: translateX(-50%) !important;
    }
    #gameScreen .table-player[data-seat-index="3"] {
        left: auto !important; right: 3% !important; top: 31% !important;
    }
    #gameScreen .table-player[data-seat-index="4"] {
        left: 8% !important; top: 48% !important;
    }
    #gameScreen .table-player[data-seat-index="5"] {
        left: auto !important; right: 8% !important; top: 48% !important;
    }
    #gameScreen .table-player.own-player {
        left: 50% !important;
        top: auto !important;
        bottom: 34.5dvh !important;
        width: 126px !important;
        height: 94px !important;
        transform: translateX(-50%) !important;
        z-index: 150 !important;
    }

    #gameScreen .table-player-data {
        left: 53% !important;
        top: 51% !important;
        width: 43% !important;
        gap: 2px !important;
    }
    #gameScreen .table-player-data > strong {
        padding: 2px 3px !important;
        border-radius: 5px !important;
        font-size: .58rem !important;
    }
    #gameScreen .table-player-stats { gap: 2px !important; }
    #gameScreen .table-player-stats span { padding: 2px 1px !important; }
    #gameScreen .table-player-stats i { font-size: .30rem !important; }
    #gameScreen .table-player-stats b { font-size: .50rem !important; }
    #gameScreen .table-player-cards {
        left: 57% !important;
        top: 24% !important;
        min-width: 35% !important;
        padding: 2px 3px !important;
        font-size: .48rem !important;
    }

    /* Stapel oben links, Phase oben rechts. */
    #gameScreen .table-play-zone {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: transparent !important;
        pointer-events: none !important;
    }
    #gameScreen .draw-zone {
        position: absolute !important;
        left: 18px !important;
        top: 142px !important;
        width: 178px !important;
        height: 128px !important;
        display: flex !important;
        gap: 12px !important;
        align-items: flex-start !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    #gameScreen #deckPile,
    #gameScreen #discardPile {
        position: relative !important;
        inset: auto !important;
        width: 78px !important;
        min-width: 78px !important;
        height: 116px !important;
        transform: none !important;
    }
    #gameScreen .card-pile .card-back,
    #gameScreen #discardCard,
    #gameScreen #discardCard .fairy-card {
        width: 68px !important;
        height: 96px !important;
        max-width: 68px !important;
        max-height: 96px !important;
    }
    #gameScreen .card-pile small {
        bottom: -23px !important;
        font-size: .58rem !important;
        white-space: nowrap !important;
    }

    #gameScreen #phasePanel.phase-panel,
    #gameScreen #phasePanel.phase-panel-over-hand-v12b {
        position: absolute !important;
        z-index: 220 !important;
        top: 146px !important;
        right: 16px !important;
        left: auto !important;
        bottom: auto !important;
        width: 150px !important;
        min-height: 108px !important;
        padding: 9px 10px 10px !important;
        transform: none !important;
        border-radius: 15px !important;
        text-align: center !important;
        background: linear-gradient(180deg, rgba(17,34,57,.97), rgba(6,12,22,.97)) !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.55) !important;
        pointer-events: auto !important;
    }
    #gameScreen #phasePanel .phase-panel-kicker {
        display: block !important;
        font-size: .58rem !important;
        letter-spacing: .06em !important;
    }
    #gameScreen #phasePanel strong {
        display: block !important;
        margin: 3px 0 !important;
        font-size: 1.10rem !important;
    }
    #gameScreen #phasePanel p {
        display: block !important;
        margin: 2px 0 5px !important;
        font-size: .69rem !important;
        line-height: 1.15 !important;
    }
    #gameScreen #phasePanel .phase-status {
        display: block !important;
        padding-top: 5px !important;
        font-size: .57rem !important;
        line-height: 1.1 !important;
    }

    /* Freie zentrale Tischfläche. */
    #gameScreen #meldArea,
    #gameScreen.game-screen > #meldArea.meld-area {
        position: absolute !important;
        z-index: 110 !important;
        left: 9% !important;
        right: 9% !important;
        top: 29% !important;
        bottom: 38% !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
    #gameScreen .player-meld-cluster {
        transform: scale(.68) !important;
        transform-origin: center !important;
    }

    /* Handrahmen und Karten vollständig sichtbar. */
    #gameScreen #handShell.hand-shell {
        position: absolute !important;
        z-index: 260 !important;
        left: 2vw !important;
        right: 2vw !important;
        bottom: 10.5dvh !important;
        width: 96vw !important;
        height: 25dvh !important;
        min-height: 185px !important;
        max-height: 245px !important;
        aspect-ratio: auto !important;
        transform: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        filter: drop-shadow(0 -6px 18px rgba(0,0,0,.65)) !important;
    }
    #gameScreen #handShell .hand-frame-image {
        object-fit: fill !important;
        width: 100% !important;
        height: 100% !important;
    }
    #gameScreen #handCards.hand-cards {
        left: 8% !important;
        right: 8% !important;
        top: 24% !important;
        bottom: 12% !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: flex-end !important;
        gap: 0 !important;
        padding: 0 12px 12px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        touch-action: pan-x !important;
        perspective: none !important;
    }
    #gameScreen #handCards::-webkit-scrollbar { display: none !important; }
    #gameScreen #handCards .hand-card {
        flex: 0 0 72px !important;
        width: 72px !important;
        height: 108px !important;
        margin-left: -18px !important;
        transform: translateY(var(--lift, 0)) rotate(0deg) scale(1) !important;
        transform-origin: center bottom !important;
        scroll-snap-align: center !important;
    }
    #gameScreen #handCards .hand-card:first-child { margin-left: 0 !important; }
    #gameScreen #handCards .hand-card.selected {
        --lift: -18px !important;
        z-index: 20 !important;
    }
    #gameScreen #handCards .fairy-card,
    #gameScreen #handCards .card-png {
        width: 72px !important;
        height: 108px !important;
        max-width: 72px !important;
        max-height: 108px !important;
        transform: none !important;
    }

    /* Große, bedienbare Aktionsleiste am unteren Rand. */
    #gameScreen .game-action-bar {
        position: absolute !important;
        z-index: 350 !important;
        left: 12px !important;
        right: 12px !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        min-height: 82px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 22px 52px !important;
        gap: 7px 9px !important;
        padding: 7px !important;
        transform: none !important;
        border-radius: 18px !important;
        background: rgba(5,9,15,.96) !important;
    }
    #gameScreen .selected-count {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: .66rem !important;
    }
    #gameScreen .game-action-button {
        min-width: 0 !important;
        height: 52px !important;
        padding: 7px 8px !important;
        border-radius: 14px !important;
        font-size: .72rem !important;
        white-space: normal !important;
        line-height: 1.05 !important;
    }
    #gameScreen #mobileDrawButton { grid-column: 1 !important; grid-row: 2 !important; }
    #gameScreen #layPhaseButton { grid-column: 2 !important; grid-row: 2 !important; }
    #gameScreen #discardButton {
        position: absolute !important;
        right: 8px !important;
        bottom: 91px !important;
        width: 104px !important;
        height: 40px !important;
        font-size: .61rem !important;
    }
    #gameScreen #sortHandButton,
    #gameScreen #hideHandButton {
        position: absolute !important;
        bottom: calc(25dvh + 8px) !important;
        width: 78px !important;
        height: 38px !important;
        padding: 4px !important;
        font-size: .56rem !important;
    }
    #gameScreen #sortHandButton { right: 12px !important; }
    #gameScreen #hideHandButton { left: 12px !important; }

    #gameScreen #gameActionHint {
        display: none !important;
    }
    #gameScreen .game-log-panel {
        position: fixed !important;
        z-index: 900 !important;
        top: max(72px, calc(env(safe-area-inset-top) + 60px)) !important;
        left: 12px !important;
        right: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        transform: translateX(-120%) !important;
    }
    #gameScreen .game-log-panel.open { transform: translateX(0) !important; }
}

@media (orientation: portrait) and (max-width: 390px) {
    #gameScreen .draw-zone { left: 10px !important; gap: 6px !important; }
    #gameScreen #deckPile,
    #gameScreen #discardPile { width: 68px !important; min-width: 68px !important; }
    #gameScreen #phasePanel.phase-panel,
    #gameScreen #phasePanel.phase-panel-over-hand-v12b { right: 9px !important; width: 136px !important; }
    #gameScreen #handCards .hand-card,
    #gameScreen #handCards .fairy-card,
    #gameScreen #handCards .card-png { width: 66px !important; max-width: 66px !important; }
    #gameScreen #handCards .hand-card { flex-basis: 66px !important; }
}
/* MAERCHENPFAD_MOBILE_PORTRAIT_FINAL_V7_END */

/* MP_TABLE_MELDS_MATCH_REFERENCE_V16_START */
/*
 * Desktop/Querformat: Auslagen exakt links vom Phasenfeld, frei auf dem Tisch,
 * ohne dunkle Boxen und ohne Rotation – wie in der Referenz.
 */
@media (min-width: 901px) and (orientation: landscape) {
    #gameScreen #meldArea.meld-area,
    .game-screen #meldArea.meld-area {
        position: absolute !important;
        z-index: 60 !important;
        left: 18.6% !important;
        top: clamp(112px, 17vh, 160px) !important;
        right: auto !important;
        bottom: auto !important;
        width: min(470px, 29vw) !important;
        max-width: min(470px, 29vw) !important;
        min-width: 260px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 22px !important;
        overflow: visible !important;
        pointer-events: none !important;
        transform: none !important;
        isolation: isolate !important;
    }

    #gameScreen .mp-seat-zone,
    .game-screen .mp-seat-zone {
        display: none !important;
    }

    #gameScreen .player-meld-cluster,
    .game-screen .player-meld-cluster {
        --mp-meld-rotation: 0deg !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 1 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        align-content: flex-start !important;
        gap: 26px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        transform-origin: center center !important;
        pointer-events: none !important;
        filter: none !important;
    }

    #gameScreen .player-meld-cluster[data-seat],
    #gameScreen .player-meld-cluster[data-seat="top"],
    #gameScreen .player-meld-cluster[data-seat="left"],
    #gameScreen .player-meld-cluster[data-seat="right"],
    #gameScreen .player-meld-cluster[data-seat="bottom"],
    .game-screen .player-meld-cluster[data-seat] {
        transform: none !important;
    }

    #gameScreen .player-meld-cluster > .table-meld,
    .game-screen .player-meld-cluster > .table-meld {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    #gameScreen .player-meld-cluster > .table-meld::before,
    .game-screen .player-meld-cluster > .table-meld::before {
        content: attr(data-meld-title) !important;
        display: block !important;
        margin: 0 0 3px 0 !important;
        color: #f6dda7 !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: clamp(18px, 1.04vw, 22px) !important;
        font-weight: 700 !important;
        line-height: 1.06 !important;
        letter-spacing: .02em !important;
        white-space: nowrap !important;
        text-align: left !important;
        text-shadow: 0 2px 6px rgba(0,0,0,.86) !important;
        text-transform: uppercase !important;
    }

    #gameScreen .player-meld-cluster .table-meld-label,
    .game-screen .player-meld-cluster .table-meld-label {
        display: none !important;
    }

    #gameScreen .player-meld-cluster .meld-cards,
    .game-screen .player-meld-cluster .meld-cards {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        filter: drop-shadow(0 8px 14px rgba(0,0,0,.32)) !important;
    }

    #gameScreen .player-meld-cluster .meld-card,
    .game-screen .player-meld-cluster .meld-card {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: clamp(108px, 12.2vh, 138px) !important;
        max-height: clamp(108px, 12.2vh, 138px) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    #gameScreen .player-meld-cluster .meld-card > .fairy-card,
    #gameScreen .player-meld-cluster .meld-card .fairy-card,
    .game-screen .player-meld-cluster .meld-card > .fairy-card,
    .game-screen .player-meld-cluster .meld-card .fairy-card {
        transform: none !important;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,.34)) !important;
    }

    #gameScreen .player-meld-cluster > .table-meld.can-hit,
    .game-screen .player-meld-cluster > .table-meld.can-hit {
        cursor: pointer !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    #gameScreen .player-meld-cluster > .table-meld.can-hit .meld-cards,
    .game-screen .player-meld-cluster > .table-meld.can-hit .meld-cards {
        filter: drop-shadow(0 0 11px rgba(111, 233, 145, .38)) drop-shadow(0 8px 14px rgba(0,0,0,.32)) !important;
    }

    #gameScreen .player-meld-cluster > .table-meld.can-hit::after,
    .game-screen .player-meld-cluster > .table-meld.can-hit::after {
        content: none !important;
        display: none !important;
    }
}
/* MP_TABLE_MELDS_MATCH_REFERENCE_V16_END */

/* MAERCHENPFAD_SPECTATOR_NEXT_GAME_GAME_CSS_V18_START */

body.mp-spectator-mode-v18 #gameScreen #handShell,
body.mp-spectator-mode-v18 #gameScreen #phasePanel,
body.mp-spectator-mode-v18 #gameScreen #layPhaseButton,
body.mp-spectator-mode-v18 #gameScreen #discardButton,
body.mp-spectator-mode-v18 #gameScreen #sortHandButton,
body.mp-spectator-mode-v18 #gameScreen #hideHandButton,
body.mp-spectator-mode-v18 #gameScreen #selectedCount {
    display: none !important;
}

body.mp-spectator-mode-v18 #gameScreen #deckPile,
body.mp-spectator-mode-v18 #gameScreen #discardPile,
body.mp-spectator-mode-v18 #gameScreen [data-meld-id],
body.mp-spectator-mode-v18 #gameScreen [data-hand-card] {
    pointer-events: none !important;
    cursor: default !important;
}

body.mp-spectator-mode-v18 #gameScreen #deckPile,
body.mp-spectator-mode-v18 #gameScreen #discardPile {
    filter: brightness(.92) saturate(.9) !important;
}

body.mp-spectator-mode-v18 #gameScreen .table-player.own-player {
    outline: none !important;
}

.mp-spectator-panel-v18 {
    position: fixed;
    z-index: 10040;
    left: 50%;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: min(calc(100vw - 28px), 820px);
    min-height: 86px;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "copy status"
        "copy buttons";
    align-items: center;
    gap: 7px 14px;
    transform: translateX(-50%);
    border: 2px solid rgba(255, 220, 127, .78);
    border-radius: 18px;
    color: #fff4cf;
    background:
        radial-gradient(circle at 20% 0, rgba(86, 178, 255, .26), transparent 40%),
        linear-gradient(145deg, rgba(23, 25, 58, .97), rgba(42, 20, 57, .97));
    box-shadow:
        inset 0 0 26px rgba(92, 167, 255, .10),
        0 14px 40px rgba(0, 0, 0, .62);
    backdrop-filter: blur(12px);
}

.mp-spectator-copy-v18 {
    grid-area: copy;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.mp-spectator-copy-v18 > span {
    color: #8fdcff;
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .13em;
}

.mp-spectator-copy-v18 > strong {
    overflow: hidden;
    color: #ffe6a0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1rem, 2vw, 1.35rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-spectator-copy-v18 > small {
    max-width: 68ch;
    color: #ded8ef;
    font-size: .72rem;
    line-height: 1.35;
}

.mp-spectator-status-v18 {
    grid-area: status;
    justify-self: end;
    padding: 5px 9px;
    border: 1px solid rgba(119, 223, 255, .45);
    border-radius: 999px;
    color: #c8f3ff;
    background: rgba(29, 104, 137, .30);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.mp-spectator-buttons-v18 {
    grid-area: buttons;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.mp-spectator-buttons-v18 button {
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 224, 135, .62);
    border-radius: 10px;
    color: #fff0bf;
    font-weight: 800;
    cursor: pointer;
}

.mp-spectator-queue-v18 {
    background: linear-gradient(180deg, #7c5b1d, #422d0d);
}

.mp-spectator-hall-v18 {
    background: linear-gradient(180deg, #4d426f, #29213f);
}

.mp-spectator-buttons-v18 button:hover,
.mp-spectator-buttons-v18 button:focus-visible {
    filter: brightness(1.15);
}

@media (max-width: 680px) {
    .mp-spectator-panel-v18 {
        bottom: max(7px, env(safe-area-inset-bottom));
        width: calc(100vw - 14px);
        padding: 10px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "status"
            "buttons";
        gap: 7px;
        border-radius: 14px;
    }

    .mp-spectator-copy-v18 > small {
        font-size: .64rem;
    }

    .mp-spectator-status-v18 {
        justify-self: start;
    }

    .mp-spectator-buttons-v18 {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 34%;
    }

    .mp-spectator-buttons-v18 button {
        min-height: 36px;
        padding-inline: 7px;
        font-size: .68rem;
    }
}

/* MAERCHENPFAD_SPECTATOR_NEXT_GAME_GAME_CSS_V18_END */

/* MAERCHENPFAD_BOT_DENKZEIT_PHASE_FX_V22_START */
#gameScreen .table-player-thinking-v22 {
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: -24px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: max-content;
    padding: 6px 11px;
    border: 1px solid rgba(255, 220, 139, .72);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(53, 24, 83, .96), rgba(15, 8, 31, .96));
    color: #ffe7aa;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .48), 0 0 18px rgba(189, 114, 255, .24);
    font-size: clamp(.58rem, .72vw, .78rem);
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
}

#gameScreen .table-player-thinking-v22 i,
#gameScreen .table-player-thinking-v22 i::before,
#gameScreen .table-player-thinking-v22 i::after {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffe199;
    box-shadow: 0 0 8px rgba(255, 216, 125, .95);
}

#gameScreen .table-player-thinking-v22 i {
    position: relative;
    animation: mp-thinking-dot-v22 1.05s ease-in-out infinite;
}

#gameScreen .table-player-thinking-v22 i::before,
#gameScreen .table-player-thinking-v22 i::after {
    content: '';
    position: absolute;
    top: 0;
}

#gameScreen .table-player-thinking-v22 i::before { left: -9px; animation: mp-thinking-dot-v22 1.05s -.18s ease-in-out infinite; }
#gameScreen .table-player-thinking-v22 i::after { left: 9px; animation: mp-thinking-dot-v22 1.05s .18s ease-in-out infinite; }

@keyframes mp-thinking-dot-v22 {
    0%, 100% { opacity: .34; transform: translateY(1px) scale(.72); }
    48% { opacity: 1; transform: translateY(-2px) scale(1.18); }
}

.mp-phase-video-overlay-v22 {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: grid;
    place-items: stretch;
    overflow: hidden;
    background: #000;
    opacity: 1;
    animation: mp-phase-video-in-v22 .22s ease-out both;
    isolation: isolate;
}

.mp-phase-video-overlay-v22.is-leaving {
    opacity: 0;
    transition: opacity .22s ease;
}

.mp-phase-video-v22 {
    position: absolute;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    background: #000;
}

.mp-phase-video-skip-v22 {
    position: absolute;
    z-index: 2;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    padding: 10px 17px;
    border: 1px solid rgba(255, 226, 153, .82);
    border-radius: 999px;
    background: rgba(12, 7, 24, .7);
    color: #fff0bd;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font: 800 .82rem/1 system-ui, sans-serif;
    cursor: pointer;
}

@keyframes mp-phase-video-in-v22 {
    from { opacity: 0; transform: scale(1.015); }
    to { opacity: 1; transform: scale(1); }
}

.mp-card-flight-layer-v22 {
    position: fixed;
    z-index: 2147482500;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    isolation: isolate;
}

.mp-card-flight-v22 {
    position: fixed;
    z-index: 3;
    pointer-events: none;
    transform-origin: 50% 50%;
    filter:
        drop-shadow(0 12px 15px rgba(0, 0, 0, .58))
        drop-shadow(0 0 14px rgba(255, 220, 112, .96))
        drop-shadow(0 0 28px rgba(174, 97, 255, .88));
}

.mp-card-flight-v22::before,
.mp-card-flight-v22::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 72%;
    width: 145px;
    height: 22px;
    border-radius: 50%;
    transform: translateY(-50%);
    transform-origin: right center;
    background: linear-gradient(90deg, transparent, rgba(184, 105, 255, .2), rgba(255, 226, 126, .95));
    filter: blur(5px);
    opacity: .92;
}

.mp-card-flight-v22::after {
    width: 94px;
    height: 7px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.98));
    filter: blur(1px);
}

.mp-card-flight-v22 .fairy-card,
.mp-card-flight-v22 .card-png,
.mp-card-flight-v22 img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

.mp-card-flight-spark-v22 {
    position: fixed;
    z-index: 2;
    width: 14px;
    height: 14px;
    color: #fff1a8;
    text-align: center;
    font: 900 15px/14px Georgia, serif;
    text-shadow: 0 0 5px #fff, 0 0 11px #ffc85b, 0 0 18px #ad61ff;
    pointer-events: none;
}

#gameScreen #discardPile.mp-discard-receiving-v22 #discardCard {
    opacity: .2;
    transition: opacity .12s ease;
}

#gameScreen #discardPile.mp-discard-impact-v22 {
    animation: mp-discard-impact-v22 .58s cubic-bezier(.2,.75,.25,1) both;
}

#gameScreen #discardPile.mp-discard-impact-v22 #discardCard {
    filter: drop-shadow(0 0 10px #fff3a7) drop-shadow(0 0 24px #a64eff);
}

@keyframes mp-discard-impact-v22 {
    0% { transform: scale(.82) rotate(-3deg); }
    42% { transform: scale(1.16) rotate(2deg); }
    100% { transform: scale(1) rotate(0); }
}

@media (max-width: 900px), (pointer: coarse) {
    #gameScreen .table-player-thinking-v22 {
        bottom: -18px;
        padding: 4px 8px;
        font-size: .52rem;
    }

    .mp-phase-video-skip-v22 {
        padding: 9px 14px;
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    #gameScreen .table-player-thinking-v22 i,
    #gameScreen .table-player-thinking-v22 i::before,
    #gameScreen .table-player-thinking-v22 i::after {
        animation-duration: 1.8s;
    }
}
/* MAERCHENPFAD_BOT_DENKZEIT_PHASE_FX_V22_END */

/* MAERCHENPFAD_MELDS_STAY_ON_TABLE_V23_START */
/*
 * Der V16-Desktopblock stellte alle Phasen links untereinander dar.
 * V23 lässt die vorhandene Spieler-/Tischberechnung wieder greifen und hält
 * die Karten trotzdem ohne dunkle Boxen frei auf dem Spielfeld.
 */
@media (min-width: 901px) and (orientation: landscape) {
    #gameScreen #meldArea.meld-area,
    #gameScreen.game-screen > #meldArea.meld-area,
    .game-screen #meldArea.meld-area,
    .game-screen > #meldArea.meld-area {
        position: absolute !important;
        z-index: 60 !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        transform: none !important;
        pointer-events: none !important;
        isolation: isolate !important;
    }

    #gameScreen .player-meld-cluster,
    .game-screen .player-meld-cluster {
        --mp-meld-rotation: 0deg;
        position: absolute !important;
        z-index: 61 !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: max-content !important;
        max-width: min(650px, 46vw) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-flow: row wrap !important;
        align-items: center !important;
        justify-content: center !important;
        align-content: center !important;
        gap: clamp(10px, .9vw, 18px) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform:
            translate(-50%, -50%)
            rotate(var(--mp-meld-rotation))
            !important;
        transform-origin: center center !important;
        pointer-events: none !important;
        filter: none !important;
    }

    #gameScreen .player-meld-cluster[data-seat="top"],
    .game-screen .player-meld-cluster[data-seat="top"] {
        --mp-meld-rotation: 180deg !important;
    }

    #gameScreen .player-meld-cluster[data-seat="left"],
    .game-screen .player-meld-cluster[data-seat="left"] {
        --mp-meld-rotation: 90deg !important;
    }

    #gameScreen .player-meld-cluster[data-seat="right"],
    .game-screen .player-meld-cluster[data-seat="right"] {
        --mp-meld-rotation: -90deg !important;
    }

    #gameScreen .player-meld-cluster[data-seat="bottom"],
    .game-screen .player-meld-cluster[data-seat="bottom"] {
        --mp-meld-rotation: 0deg !important;
    }

    #gameScreen .player-meld-cluster > .table-meld,
    .game-screen .player-meld-cluster > .table-meld {
        position: relative !important;
        inset: auto !important;
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    #gameScreen .player-meld-cluster > .table-meld::before,
    .game-screen .player-meld-cluster > .table-meld::before {
        margin: 0 0 1px !important;
        font-size: clamp(12px, .72vw, 16px) !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    #gameScreen .player-meld-cluster .meld-cards,
    .game-screen .player-meld-cluster .meld-cards {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(4px, .35vw, 7px) !important;
        width: max-content !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        filter: drop-shadow(0 7px 12px rgba(0,0,0,.36)) !important;
    }

    #gameScreen .player-meld-cluster .meld-card,
    .game-screen .player-meld-cluster .meld-card {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: clamp(74px, 9.4vh, 108px) !important;
        max-height: clamp(74px, 9.4vh, 108px) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    #gameScreen .player-meld-cluster .table-meld-label,
    .game-screen .player-meld-cluster .table-meld-label {
        display: none !important;
    }
}
/* MAERCHENPFAD_MELDS_STAY_ON_TABLE_V23_END */

/* MAERCHENPFAD_MELDS_CENTER_PHASE_TOP_RIGHT_V24_START */
/*
 * Alle ausgelegten Phasen liegen ab V24 ausschließlich gesammelt in der
 * Tischmitte. Keine Auslage wird mehr an einem Spielerprofil oder am linken
 * Spielfeldrand positioniert.
 */
#gameScreen #meldArea.meld-area.mp-melds-center-v24,
#gameScreen.game-screen > #meldArea.meld-area.mp-melds-center-v24,
.game-screen #meldArea.meld-area.mp-melds-center-v24,
.game-screen > #meldArea.meld-area.mp-melds-center-v24 {
    position: absolute !important;
    z-index: 64 !important;

    inset: auto !important;
    left: 50% !important;
    top: 55% !important;
    right: auto !important;
    bottom: auto !important;

    width: min(78vw, 1420px) !important;
    max-width: min(78vw, 1420px) !important;
    min-width: 0 !important;
    height: min(47vh, 520px) !important;
    min-height: 0 !important;
    max-height: min(47vh, 520px) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
    gap: clamp(9px, 1.15vh, 18px) !important;

    overflow: visible !important;
    transform: translate(-50%, -50%) !important;
    isolation: isolate !important;
    pointer-events: none !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster,
.game-screen #meldArea.mp-melds-center-v24 .player-meld-cluster {
    --mp-meld-rotation: 0deg !important;

    position: relative !important;
    z-index: 65 !important;

    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    align-content: center !important;
    gap: clamp(13px, 1.15vw, 24px) !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;

    transform: none !important;
    transform-origin: center center !important;
    pointer-events: none !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster[data-seat],
.game-screen #meldArea.mp-melds-center-v24 .player-meld-cluster[data-seat] {
    transform: none !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster > .table-meld,
.game-screen #meldArea.mp-melds-center-v24 .player-meld-cluster > .table-meld {
    position: relative !important;
    inset: auto !important;

    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(5px, .6vh, 9px) !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster > .table-meld::before,
.game-screen #meldArea.mp-melds-center-v24 .player-meld-cluster > .table-meld::before {
    content: attr(data-meld-title) !important;
    display: block !important;

    width: 100% !important;
    min-width: max-content !important;
    margin: 0 !important;
    padding: 3px 14px 4px !important;

    color: #f8e3aa !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(12px, .78vw, 17px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .95) !important;

    border: 1px solid rgba(226, 183, 76, .34) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(16, 23, 37, .94), rgba(5, 9, 16, .88)) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    box-sizing: border-box !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .table-meld-label,
.game-screen #meldArea.mp-melds-center-v24 .table-meld-label {
    display: none !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .meld-cards,
.game-screen #meldArea.mp-melds-center-v24 .meld-cards {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(3px, .32vw, 7px) !important;

    width: max-content !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;

    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .42)) !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .meld-card,
.game-screen #meldArea.mp-melds-center-v24 .meld-card {
    display: block !important;
    flex: 0 0 auto !important;

    width: auto !important;
    height: clamp(80px, 10.4vh, 124px) !important;
    max-height: clamp(80px, 10.4vh, 124px) !important;

    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .meld-card > .fairy-card,
#gameScreen #meldArea.mp-melds-center-v24 .meld-card .fairy-card,
.game-screen #meldArea.mp-melds-center-v24 .meld-card > .fairy-card,
.game-screen #meldArea.mp-melds-center-v24 .meld-card .fairy-card {
    width: auto !important;
    height: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .38)) !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .meld-card .card-png,
.game-screen #meldArea.mp-melds-center-v24 .meld-card .card-png {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Bei mehreren Spielern werden die Reihen automatisch kleiner, damit alles
 * weiterhin gemeinsam in der Tischmitte bleibt. */
#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="3"] .meld-card,
#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="4"] .meld-card {
    height: clamp(66px, 8.2vh, 96px) !important;
    max-height: clamp(66px, 8.2vh, 96px) !important;
}

#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="5"] .meld-card,
#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="6"] .meld-card {
    height: clamp(52px, 6.4vh, 76px) !important;
    max-height: clamp(52px, 6.4vh, 76px) !important;
}

#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="5"],
#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="6"] {
    gap: 6px !important;
}

#gameScreen #meldArea.mp-melds-center-v24 .table-meld.can-hit .meld-cards,
.game-screen #meldArea.mp-melds-center-v24 .table-meld.can-hit .meld-cards {
    filter:
        drop-shadow(0 0 11px rgba(111, 233, 145, .45))
        drop-shadow(0 8px 14px rgba(0, 0, 0, .42))
        !important;
}

/* Aktuelle Phase ausschließlich oben rechts. */
#gameScreen > #phasePanel.phase-panel.phase-panel-top-right-v24,
#gameScreen #phasePanel.phase-panel.phase-panel-top-right-v24,
.game-screen > #phasePanel.phase-panel.phase-panel-top-right-v24 {
    position: absolute !important;
    z-index: 220 !important;

    inset: auto !important;
    top: clamp(72px, 8.5vh, 102px) !important;
    right: clamp(14px, 1.45vw, 30px) !important;
    left: auto !important;
    bottom: auto !important;

    width: clamp(174px, 14vw, 238px) !important;
    max-width: min(238px, 25vw) !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 10px 15px 12px !important;

    text-align: center !important;
    transform: none !important;
    transform-origin: top right !important;

    border: 1px solid rgba(224, 177, 72, .55) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(20, 18, 36, .96), rgba(7, 9, 17, .96)) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    pointer-events: none !important;
}

#gameScreen #phasePanel.phase-panel-top-right-v24 .phase-panel-kicker {
    font-size: clamp(.50rem, .55vw, .64rem) !important;
}

#gameScreen #phasePanel.phase-panel-top-right-v24 strong {
    margin: 3px 0 !important;
    font-size: clamp(1rem, 1.15vw, 1.32rem) !important;
}

#gameScreen #phasePanel.phase-panel-top-right-v24 p {
    margin: 1px 0 5px !important;
    font-size: clamp(.62rem, .7vw, .78rem) !important;
    line-height: 1.2 !important;
}

#gameScreen #phasePanel.phase-panel-top-right-v24 .phase-status {
    margin-top: 6px !important;
    padding-top: 6px !important;
    font-size: clamp(.52rem, .58vw, .66rem) !important;
    line-height: 1.15 !important;
}

/* Smartphone quer: weiterhin zentral, aber kompakter. */
@media (max-width: 900px) and (orientation: landscape) {
    #gameScreen #meldArea.meld-area.mp-melds-center-v24,
    #gameScreen.game-screen > #meldArea.meld-area.mp-melds-center-v24 {
        top: 49% !important;
        width: 88vw !important;
        max-width: 88vw !important;
        height: 36vh !important;
        max-height: 36vh !important;
        gap: 5px !important;
    }

    #gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster {
        gap: 8px !important;
        max-width: 100% !important;
    }

    #gameScreen #meldArea.mp-melds-center-v24 .meld-card {
        height: clamp(42px, 7.2vh, 64px) !important;
        max-height: clamp(42px, 7.2vh, 64px) !important;
    }

    #gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster > .table-meld::before {
        padding: 2px 8px 3px !important;
        font-size: clamp(8px, 1.05vw, 11px) !important;
    }

    #gameScreen > #phasePanel.phase-panel.phase-panel-top-right-v24,
    #gameScreen #phasePanel.phase-panel.phase-panel-top-right-v24 {
        top: max(50px, calc(env(safe-area-inset-top) + 44px)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        width: min(150px, 24vw) !important;
        max-width: min(150px, 24vw) !important;
        padding: 7px 9px 8px !important;
        border-radius: 12px !important;
    }
}

/* Smartphone hochkant: Phase bleibt oben rechts und die Auslagen mittig. */
@media (orientation: portrait) {
    #gameScreen #meldArea.meld-area.mp-melds-center-v24,
    #gameScreen.game-screen > #meldArea.meld-area.mp-melds-center-v24 {
        top: 48% !important;
        width: 92vw !important;
        max-width: 92vw !important;
        height: 34vh !important;
        max-height: 34vh !important;
        gap: 5px !important;
    }

    #gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster {
        max-width: 100% !important;
        gap: 7px !important;
    }

    #gameScreen #meldArea.mp-melds-center-v24 .meld-card {
        height: clamp(44px, 6.8vh, 68px) !important;
        max-height: clamp(44px, 6.8vh, 68px) !important;
    }

    #gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster > .table-meld::before {
        padding: 2px 7px 3px !important;
        font-size: clamp(8px, 2.2vw, 11px) !important;
    }

    #gameScreen > #phasePanel.phase-panel.phase-panel-top-right-v24,
    #gameScreen #phasePanel.phase-panel.phase-panel-top-right-v24 {
        top: max(64px, calc(env(safe-area-inset-top) + 54px)) !important;
        right: max(9px, env(safe-area-inset-right)) !important;
        width: min(145px, 39vw) !important;
        max-width: min(145px, 39vw) !important;
        padding: 8px 9px 9px !important;
        border-radius: 13px !important;
    }
}
/* MAERCHENPFAD_MELDS_CENTER_PHASE_TOP_RIGHT_V24_END */

/* MAERCHENPFAD_AUTO_RESTKARTEN_V25_START */
#gameScreen #autoFinishButton[hidden],
.game-screen #autoFinishButton[hidden] {
    display: none !important;
}

#gameScreen #autoFinishButton.game-action-button.auto-finish,
.game-screen #autoFinishButton.game-action-button.auto-finish {
    position: relative;
    overflow: hidden;
    color: #fff7cf;
    border-color: rgba(157, 255, 190, .78);
    background:
        radial-gradient(circle at 50% -30%, rgba(255, 247, 163, .52), transparent 46%),
        linear-gradient(180deg, #318b62 0%, #15523f 48%, #0a2d2a 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.10),
        inset 0 0 18px rgba(86,255,184,.16),
        0 7px 22px rgba(0,0,0,.48),
        0 0 18px rgba(80,255,174,.20);
    text-shadow: 0 1px 2px #00140c, 0 0 9px rgba(223,255,169,.28);
}

#gameScreen #autoFinishButton.game-action-button.auto-finish::before,
.game-screen #autoFinishButton.game-action-button.auto-finish::before {
    content: '';
    position: absolute;
    inset: -45% auto -45% -55%;
    width: 35%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,220,.52), transparent);
    opacity: .72;
    animation: mp-auto-button-shimmer-v25 2.8s ease-in-out infinite;
    pointer-events: none;
}

#gameScreen #autoFinishButton.game-action-button.auto-finish:hover:not(:disabled),
.game-screen #autoFinishButton.game-action-button.auto-finish:hover:not(:disabled) {
    filter: brightness(1.15) saturate(1.08);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.14),
        inset 0 0 22px rgba(116,255,203,.22),
        0 9px 27px rgba(0,0,0,.54),
        0 0 27px rgba(91,255,180,.32);
}

#gameScreen #autoFinishButton.is-working,
.game-screen #autoFinishButton.is-working {
    animation: mp-auto-button-thinking-v25 .85s ease-in-out infinite alternate;
}

@keyframes mp-auto-button-shimmer-v25 {
    0%, 58% { left: -55%; opacity: 0; }
    70% { opacity: .78; }
    88%, 100% { left: 125%; opacity: 0; }
}

@keyframes mp-auto-button-thinking-v25 {
    from { filter: brightness(.96); }
    to { filter: brightness(1.22); box-shadow: 0 0 30px rgba(95,255,183,.42); }
}

/* Auf Mobilgeräten ersetzt Auto nach der ausgelegten Phase exakt den Platz
   des dann ausgeblendeten „Phase auslegen“-Buttons. */
@media (max-width: 900px), (pointer: coarse) {
    #gameScreen #autoFinishButton,
    .game-screen #autoFinishButton {
        grid-column: 2 !important;
        grid-row: 2 !important;
        min-width: 0 !important;
    }
}

body.mp-spectator-mode-v18 #gameScreen #autoFinishButton {
    display: none !important;
}
/* MAERCHENPFAD_AUTO_RESTKARTEN_V25_END */

/* MAERCHENPFAD_AUTO_PILOT_ALLE_ZUEGE_V26_START */
#gameScreen #autoFinishButton.is-enabled,
.game-screen #autoFinishButton.is-enabled {
    color: #fff4ba;
    border-color: rgba(255, 220, 104, .94);
    background:
        radial-gradient(circle at 50% -30%, rgba(255, 250, 174, .62), transparent 48%),
        linear-gradient(180deg, #815d16 0%, #4e2d09 48%, #211204 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.15),
        inset 0 0 22px rgba(255,219,91,.24),
        0 8px 24px rgba(0,0,0,.56),
        0 0 27px rgba(255,205,73,.42);
    animation: mp-auto-pilot-active-v26 1.45s ease-in-out infinite alternate;
}

#gameScreen #autoFinishButton.is-enabled::after,
.game-screen #autoFinishButton.is-enabled::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #93ffae;
    box-shadow: 0 0 8px #93ffae, 0 0 17px rgba(112,255,155,.76);
}

@keyframes mp-auto-pilot-active-v26 {
    from { filter: brightness(.98); }
    to { filter: brightness(1.13); }
}
/* MAERCHENPFAD_AUTO_PILOT_ALLE_ZUEGE_V26_END */

/* MAERCHENPFAD_RANKING_V34_START */
#view-ranking .mp-ranking-v34 { width: min(100%, 1120px); margin: 0 auto; }
#view-ranking .mp-ranking-header { text-align: center; padding: 24px 12px 12px; }
#view-ranking .mp-ranking-header h2 { margin: 6px 0 12px; font-size: clamp(2rem, 4vw, 3rem); color: #ffedc4; }
#view-ranking .mp-ranking-header > p:last-child { color: #c3b4cb; font-size: .9rem; line-height: 1.6; max-width: 540px; margin: 0 auto; }
#view-ranking .mp-ranking-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; max-width: 820px; margin: 28px auto; }
#view-ranking .mp-ranking-podium:empty { display: none; }
#view-ranking .mp-ranking-champion { --rank-color: #b8c7df; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; padding: 22px 14px 18px; border: 1px solid var(--rank-color); border-radius: 20px; background: radial-gradient(ellipse at top, #ffffff0d, transparent 70%), linear-gradient(160deg, #2c213a, #171020); box-shadow: 0 12px 28px #0005; }
#view-ranking .mp-rank-1 { --rank-color: #edc76e; order: 2; padding-top: 28px; background: radial-gradient(ellipse at top, #b88a2d38, transparent 70%), linear-gradient(160deg, #38253c, #211629); box-shadow: 0 0 32px #d9a64417, 0 12px 28px #0005; }
#view-ranking .mp-rank-2 { order: 1; }
#view-ranking .mp-rank-3 { --rank-color: #cf9470; order: 3; }
#view-ranking .mp-ranking-place { display: flex; align-items: center; gap: 7px; color: var(--rank-color); text-transform: uppercase; font-size: .7rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 16px; }
#view-ranking .mp-ranking-place svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#view-ranking img.mp-ranking-avatar { display: block !important; width: 76px !important; height: 76px !important; min-width: 76px !important; max-width: 76px !important; object-fit: cover !important; border-radius: 50% !important; border: 3px solid var(--rank-color) !important; box-shadow: 0 0 18px #0006; }
#view-ranking .mp-rank-1 img.mp-ranking-avatar { width: 96px !important; height: 96px !important; min-width: 96px !important; max-width: 96px !important; }
#view-ranking .mp-ranking-name { max-width: 100%; overflow-wrap: anywhere; margin-top: 14px; font-size: 1rem; color: #fff0d4; line-height: 1.3; }
#view-ranking .mp-ranking-level { margin: 6px 0 16px; color: #bfb1c9; font-size: .75rem; }
#view-ranking .mp-ranking-champion-stats { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 1px solid #ffffff12; padding-top: 12px; color: #bfb1c9; font-size: .68rem; }
#view-ranking .mp-ranking-champion-stats b { display: block; color: var(--rank-color); font-size: 1rem; overflow-wrap: anywhere; }
#view-ranking .mp-ranking-vacant { align-self: stretch; justify-content: center; border-style: dashed; opacity: .65; box-shadow: none; }
#view-ranking .mp-ranking-vacant-icon { font-size: 2.2rem; margin: 10px 0; color: var(--rank-color); }
#view-ranking .mp-ranking-vacant small { color: #bfb1c9; margin-top: 8px; font-size: .7rem; }
#view-ranking .mp-ranking-board { background: #1b1226e8; border: 1px solid #ad87434a; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 32px #0005; }
#view-ranking .mp-ranking-board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 22px; border-bottom: 1px solid #e4bd5826; background: #ffffff03; }
#view-ranking .mp-ranking-board-head h3 { margin: 0; color: #f3deb2; font-size: 1.1rem; }
#view-ranking #rankingCount { color: #bbacc5; font-size: .75rem; }
#view-ranking .mp-ranking-row { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) minmax(300px, .95fr); gap: 14px; align-items: center; padding: 17px 22px; border-bottom: 1px solid #ffffff0b; }
#view-ranking .mp-ranking-row:last-child { border-bottom: 0; }
#view-ranking .mp-ranking-row.is-self { background: linear-gradient(90deg, #b58b3226, transparent); box-shadow: inset 3px 0 #d8b566; }
#view-ranking .mp-ranking-position { font-size: 1.1rem; font-family: Georgia, serif; text-align: center; color: #e8cc92; }
#view-ranking img.mp-ranking-row-avatar { width: 46px !important; height: 46px !important; min-width: 46px !important; max-width: 46px !important; border-radius: 50% !important; object-fit: cover !important; border: 1px solid #d8b56666 !important; }
#view-ranking .mp-ranking-player { min-width: 0; }
#view-ranking .mp-ranking-player strong { display: block; overflow-wrap: anywhere; color: #f6e7cd; font-size: .9rem; }
#view-ranking .mp-ranking-player small { display: block; color: #b1a1bd; overflow-wrap: anywhere; font-size: .72rem; margin-top: 5px; line-height: 1.4; }
#view-ranking .mp-ranking-self { display: inline-block; margin-left: 7px; padding: 2px 6px; border-radius: 5px; background: #d8b56624; color: #efd398; font-size: .6rem; vertical-align: middle; }
#view-ranking .mp-ranking-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; text-align: right; }
#view-ranking .mp-ranking-numbers dt { font-size: .65rem; color: #b1a1bd; margin-bottom: 5px; }
#view-ranking .mp-ranking-numbers dd { font-size: .9rem; font-weight: 700; color: #eee0cb; margin: 0; overflow-wrap: anywhere; }
#view-ranking .mp-ranking-empty { padding: 40px 20px; text-align: center; color: #e8cc92; }
#view-ranking .mp-ranking-empty p { color: #b1a1bd; }
@media (max-width: 640px) {
    #view-ranking .mp-ranking-header { padding-top: 16px; }
    #view-ranking .mp-ranking-podium { gap: 7px; margin: 22px auto; }
    #view-ranking .mp-ranking-champion { padding: 16px 7px 12px; border-radius: 14px; }
    #view-ranking .mp-ranking-place { font-size: .6rem; letter-spacing: .03em; gap: 3px; margin-bottom: 10px; }
    #view-ranking .mp-ranking-place svg { width: 18px; height: 18px; }
    #view-ranking img.mp-ranking-avatar { width: 50px !important; height: 50px !important; min-width: 50px !important; max-width: 50px !important; }
    #view-ranking .mp-rank-1 img.mp-ranking-avatar { width: 62px !important; height: 62px !important; min-width: 62px !important; max-width: 62px !important; }
    #view-ranking .mp-ranking-name { font-size: .75rem; }
    #view-ranking .mp-ranking-level { font-size: .65rem; margin-bottom: 10px; }
    #view-ranking .mp-ranking-champion-stats { gap: 4px; font-size: .59rem; }
    #view-ranking .mp-ranking-champion-stats b { font-size: .8rem; }
    #view-ranking .mp-ranking-board-head { padding: 16px 14px; }
    #view-ranking .mp-ranking-row { grid-template-columns: 24px 42px minmax(0, 1fr); gap: 10px; padding: 15px 14px; }
    #view-ranking img.mp-ranking-row-avatar { width: 42px !important; height: 42px !important; min-width: 42px !important; max-width: 42px !important; }
    #view-ranking .mp-ranking-numbers { grid-column: 2 / -1; text-align: left; padding-top: 10px; border-top: 1px solid #ffffff0b; gap: 8px; }
    #view-ranking .mp-ranking-numbers dd { font-size: .8rem; }
}
/* MAERCHENPFAD_RANKING_V34_END */

/* MAERCHENPFAD_MEDALS_PAGE_V35_START */
#view-achievements .mp-medals-page { width: min(100%, 1120px); margin: 0 auto; }
#view-achievements .mp-medals-header { text-align: center; padding: 28px 12px; }
#view-achievements .mp-medals-header h2 { margin: 8px 0 14px; color: #ffedc4; font-size: clamp(1.8rem, 4vw, 3rem); }
#view-achievements .mp-medals-header > p:last-child { max-width: 600px; margin: 0 auto; color: #c3b4cb; line-height: 1.6; font-size: .9rem; }
#view-achievements .mp-medals-summary { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; padding: 26px; border: 1px solid #d8b56677; border-radius: 20px; background: radial-gradient(ellipse at top left, #b88a2d25, transparent 70%), #21162beF; box-shadow: 0 12px 30px #0004; }
#view-achievements .mp-medals-summary strong { display: block; font-size: clamp(1.2rem, 2.5vw, 1.6rem); color: #ffe5aa; margin-top: 8px; }
#view-achievements .mp-medals-summary p { font-size: .85rem; color: #c3b4cb; margin: 10px 0 0; line-height: 1.5; }
#view-achievements .mp-medals-summary small { display: block; color: #b7a7c4; font-size: .72rem; margin-top: 10px; line-height: 1.5; }
#view-achievements .mp-medals-track { height: 9px; border-radius: 9px; overflow: hidden; background: #090711; border: 1px solid #ffffff12; }
#view-achievements .mp-medals-track > span { display: block; height: 100%; background: linear-gradient(90deg, #a87a30, #f3d58a); border-radius: inherit; }
#view-achievements .mp-medals-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 18px; }
#view-achievements .mp-medals-filters button { min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid #ac89494a; background: #21162bed; color: #cbbbce; font-size: .82rem; cursor: pointer; }
#view-achievements .mp-medals-filters button[aria-pressed="true"] { color: #ffe5aa; background: #5c4039; border-color: #d8b566; }
#view-achievements .mp-medals-filters button:focus-visible { outline: 2px solid #ffe5aa; outline-offset: 2px; }
#view-achievements .mp-medals-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#view-achievements .mp-medal-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border-radius: 20px; border: 1px solid #ad874333; background: linear-gradient(145deg, #2b2038, #171020); box-shadow: 0 8px 25px #0004; }
#view-achievements .mp-medal-card.is-unlocked { border-color: #d8b566a6; background: radial-gradient(ellipse at top left, #c08d3028, transparent 70%), linear-gradient(145deg, #33233b, #1b1426); }
#view-achievements .mp-medal-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#view-achievements .mp-medal-emblem { width: 66px; height: 66px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; border: 2px solid #877b99; color: #bfb1cd; background: #ffffff06; box-shadow: inset 0 0 0 5px #ffffff04; }
#view-achievements .is-unlocked .mp-medal-emblem { border-color: #e5bc66; color: #f8d68c; background: radial-gradient(circle, #b8873630, #2d2031); box-shadow: 0 0 22px #d8b56620, inset 0 0 0 5px #d8b56612; }
#view-achievements .mp-medal-emblem svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#view-achievements .mp-medal-status { font-size: .65rem; color: #b7a7c4; padding: 6px 8px; border-radius: 6px; background: #ffffff06; }
#view-achievements .is-unlocked .mp-medal-status { color: #f4d993; background: #d8b56615; }
#view-achievements .mp-medal-card h3 { margin: 20px 0 8px; color: #f6e4bd; font-size: 1.25rem; overflow-wrap: anywhere; }
#view-achievements .mp-medal-card > p { color: #c3b4cb; font-size: .84rem; margin: 0 0 22px; line-height: 1.5; }
#view-achievements .mp-medal-progress-label { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; color: #b7a7c4; font-size: .7rem; margin-bottom: 9px; }
#view-achievements .mp-medal-progress-label strong { color: #ecd7ac; }
#view-achievements .mp-medals-empty { grid-column: 1 / -1; text-align: center; border: 1px dashed #d8b56655; border-radius: 16px; color: #c3b4cb; padding: 30px 18px; }
@media (max-width: 950px) { #view-achievements .mp-medals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
    #view-achievements .mp-medals-header { padding: 20px 12px; }
    #view-achievements .mp-medals-summary { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px; }
    #view-achievements .mp-medals-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #view-achievements .mp-medal-card { padding: 22px; }
    #view-achievements .mp-medals-filters { gap: 5px; }
    #view-achievements .mp-medals-filters button { padding-inline: 12px; font-size: .75rem; }
}
/* MAERCHENPFAD_MEDALS_PAGE_V35_END */

/* MAERCHENPFAD_MEDALS_PROFILE_V36_START */
#view-achievements .mp-medals-gate-notice { color: #d8c9df; font-size: .84rem; line-height: 1.6; padding: 16px 20px; border-radius: 14px; border: 1px solid #d8b56633; background: #241a30e8; }
#view-achievements .mp-medal-sealed { position: relative; overflow: hidden; min-height: 256px; }
#view-achievements .mp-medal-blurred { filter: blur(9px); opacity: .45; user-select: none; pointer-events: none; }
#view-achievements .mp-medal-seal { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 22px; background: #100b1e66; }
#view-achievements .mp-medal-seal strong { color: #e8d5b0; font-size: 1rem; margin-bottom: 10px; }
#view-achievements .mp-medal-seal span { color: #b9a8c5; font-size: .75rem; line-height: 1.6; max-width: 190px; }
#view-profile .profile-layout { width: min(100%, 1120px); margin: 20px auto 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 22px; align-items: start; }
#view-profile .profile-hero { position: relative; top: auto; min-width: 0; padding: 28px 22px; text-align: center; background: radial-gradient(ellipse at top, #ac7b3020, transparent 65%), linear-gradient(150deg, #2e213beF, #171021f5); border: 1px solid #d8b56666; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 28px #0005; }
#view-profile .profile-aura { display: none !important; }
#view-profile img#profileAvatarLarge { display: block !important; width: 120px !important; height: 120px !important; min-width: 120px !important; max-width: 120px !important; min-height: 120px !important; max-height: 120px !important; object-fit: cover !important; border-radius: 50% !important; border: 3px solid var(--accent) !important; transform: none !important; margin: 0 auto 22px; }
#view-profile .profile-title { position: relative; color: #d8b566; font-size: .75rem; margin: 0 0 9px; }
#view-profile #profileNameDisplay { color: #ffe8ba; font-size: 1.6rem; margin: 0; overflow-wrap: anywhere; }
#view-profile #profileUsernameDisplay { color: #b4a1c2; font-size: .8rem; margin: 9px 0 22px; overflow-wrap: anywhere; }
#view-profile .level-block { margin: 0; text-align: left; padding: 15px; background: #ffffff04; border: 1px solid #ffffff0b; border-radius: 12px; }
#view-profile .level-block > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: .75rem; margin-bottom: 9px; }
#view-profile .mp-profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
#view-profile .mp-profile-stats > div { background: #ffffff04; border: 1px solid #ffffff0b; border-radius: 12px; padding: 13px 8px; }
#view-profile .mp-profile-stats dt { font-size: .7rem; color: #baa9c6; margin-bottom: 5px; }
#view-profile .mp-profile-stats dd { font-weight: 700; font-size: 1.1rem; color: #ffe4ac; margin: 0; overflow-wrap: anywhere; }
#view-profile .profile-bio { text-align: left; line-height: 1.7; font-size: .85rem; color: #c6b5d0; white-space: pre-wrap; overflow-wrap: anywhere; margin: 20px 0 0; padding-top: 17px; border-top: 1px solid #ffffff10; }
#view-profile .profile-content { min-width: 0; display: grid; gap: 18px; }
#view-profile .profile-content .content-card { min-width: 0; padding: 26px; border: 1px solid #d8b56633; border-radius: 20px; background: #21172ceF; box-shadow: 0 12px 28px #0004; }
#view-profile .section-heading { margin-bottom: 22px; }
#view-profile .section-heading h3 { color: #f5deb2; font-size: 1.35rem; }
#view-profile .profile-form { display: grid; gap: 20px; }
#view-profile .profile-form label { color: #d7c6e0; font-size: .8rem; gap: 8px; min-width: 0; }
#view-profile .profile-form input, #view-profile .profile-form textarea { width: 100%; min-width: 0; font-size: 16px; background: #100c1c; border: 1px solid #9d7b443d; border-radius: 10px; color: #f3e6d0; padding: 12px; }
#view-profile .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#view-profile .profile-form fieldset { min-width: 0; border: 1px solid #ffffff10; border-radius: 14px; padding: 15px; margin: 0; }
#view-profile .profile-form legend { color: #e6d1a8; font-size: .8rem; padding: 0 7px; }
#view-profile #avatarPicker { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important; gap: 10px !important; padding: 5px !important; max-height: 270px !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; }
#view-profile #avatarPicker .avatar-option { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 68px !important; min-width: 0 !important; min-height: 0 !important; padding: 5px !important; border-radius: 12px !important; background: #ffffff04; border: 2px solid transparent !important; transform: none !important; }
#view-profile #avatarPicker .avatar-option.selected { border-color: #edc76e !important; background: #d8b56618 !important; box-shadow: 0 0 10px #d8b56622; }
#view-profile #avatarPicker .avatar-option img { width: 52px !important; height: 52px !important; min-width: 52px !important; min-height: 52px !important; max-width: 52px !important; max-height: 52px !important; border-radius: 9px !important; object-fit: cover !important; transform: none !important; }
#view-profile #accentPicker { gap: 12px; padding: 5px; }
#view-profile #accentPicker .accent-option { width: 40px; height: 40px; }
#view-profile .profile-form > .btn { min-height: 48px; width: 100%; border-radius: 12px; }
#view-profile button:focus-visible { outline: 2px solid #ffe5a3; outline-offset: 2px; }
@media (max-width: 820px) {
    #view-profile .profile-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 8px; }
    #view-profile .profile-hero { padding: 24px; }
    #view-profile .mp-profile-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    #view-profile .profile-content .content-card { padding: 20px; }
    #view-profile .mp-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #view-profile .form-grid { grid-template-columns: minmax(0, 1fr); }
    #view-profile .profile-form fieldset { padding: 12px; }
}
/* MAERCHENPFAD_MEDALS_PROFILE_V36_END */

/* V38: frameless hand and a blocking, accessible graphics loading screen. */
#gameScreen #handShell .hand-frame-image { display: none !important; }
#gameScreen #handShell.hand-shell { bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)) !important; }
#gameScreen #handCards.hand-cards { left: 0 !important; right: 0 !important; top: 10% !important; bottom: 4% !important; }
.mp-game-loading-v38 { border: 0; padding: 0; background: transparent; color: #fff4d3; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.mp-game-loading-v38::backdrop { background: rgba(12, 8, 18, .95); }
.mp-game-loading-card { padding: clamp(20px, 5vw, 36px); border-radius: 22px; background: #20152b; text-align: center; box-shadow: 0 12px 60px #0008; }
.mp-game-loading-card h2 { margin: 18px 0 12px; font: bold clamp(20px, 4vw, 26px) Georgia, serif; }
.mp-game-loading-card p { color: #ded4e6; line-height: 1.5; }
.mp-game-loading-card progress { width: 100%; height: 12px; accent-color: #bc8cdf; }
.mp-loading-count { font-variant-numeric: tabular-nums; font-size: 14px; }
.mp-loading-spinner { display: inline-block; width: 38px; height: 38px; border: 3px solid #ffffff25; border-top-color: #bc8cdf; border-radius: 50%; animation: mp-loading-v38 1s linear infinite; }
@keyframes mp-loading-v38 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mp-loading-spinner { animation: none; } }

/* V39: half-visible hand behind the toolbar; compact, upright table cards. */
#gameScreen #handShell.hand-shell { bottom: var(--mp-hand-bottom-v39, 0px) !important; }
#gameScreen #handCards.hand-cards { clip-path: inset(-400px -24px var(--mp-hand-crop-v39, 0px) -24px); }
#gameScreen .game-action-bar { background: #090d15 !important; }

#gameScreen.game-screen .table-play-zone > .draw-zone {
    left: 23% !important;
    top: 40% !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    align-items: center !important;
    gap: clamp(12px, 1.6vw, 24px) !important;
    transform: translateY(-50%) !important;
}
#gameScreen #discardPile {
    width: clamp(52px, 5.2vw, 82px) !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: .66;
    transform: none !important;
    perspective: none !important;
}
#gameScreen #discardPile #discardCard,
#gameScreen #discardPile #discardCard .fairy-card,
#gameScreen #discardPile #discardCard .card-png {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    rotate: none !important;
    object-fit: contain !important;
}
#gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster,
#gameScreen #meldArea.mp-melds-center-v24 .table-meld,
#gameScreen #meldArea.mp-melds-center-v24 .meld-cards,
#gameScreen #meldArea.mp-melds-center-v24 .meld-card,
#gameScreen #meldArea.mp-melds-center-v24 .meld-card .fairy-card,
#gameScreen #meldArea.mp-melds-center-v24 .meld-card .card-png {
    transform: none !important;
    rotate: none !important;
    perspective: none !important;
}
#gameScreen #meldArea.mp-melds-center-v24 .meld-card {
    height: clamp(64px, 8.3vh, 100px) !important;
    max-height: clamp(64px, 8.3vh, 100px) !important;
}
#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="3"] .meld-card,
#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="4"] .meld-card {
    height: clamp(54px, 6.6vh, 78px) !important;
    max-height: clamp(54px, 6.6vh, 78px) !important;
}
#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="5"] .meld-card,
#gameScreen #meldArea.mp-melds-center-v24[data-meld-count="6"] .meld-card {
    height: clamp(44px, 5.2vh, 62px) !important;
    max-height: clamp(44px, 5.2vh, 62px) !important;
}
@media (max-width: 900px) and (orientation: landscape) {
    #gameScreen.game-screen .table-play-zone > .draw-zone { left: 23% !important; top: 44% !important; }
    #gameScreen #discardPile { width: 36px !important; }
    #gameScreen #meldArea.mp-melds-center-v24 { left: 61% !important; top: 51% !important; width: 52vw !important; max-width: 52vw !important; }
    #gameScreen #meldArea.mp-melds-center-v24 .meld-card { height: clamp(36px, 6vh, 52px) !important; max-height: clamp(36px, 6vh, 52px) !important; }
}
@media (orientation: portrait) {
    #gameScreen.game-screen .table-play-zone > .draw-zone { left: 20% !important; top: 29% !important; }
    #gameScreen #discardPile { width: 54px !important; }
    #gameScreen #meldArea.mp-melds-center-v24 { top: 48% !important; }
    #gameScreen #meldArea.mp-melds-center-v24 .meld-card { height: clamp(36px, 5.5vh, 55px) !important; max-height: clamp(36px, 5.5vh, 55px) !important; }
}

#gameScreen.game-screen .table-play-zone {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

#gameScreen.game-screen #meldArea.mp-melds-center-v24 .table-meld .table-meld-label { display: none !important; }
@media (min-width: 901px) {
    #gameScreen #gameActionHint { bottom: 23vh; }
}

/* V40/V41: table cards on desktop, full-width toolbar, separate mobile table regions. */
@media (min-width: 901px) and (pointer: fine) {
    #gameScreen .game-action-bar {
        width: min(var(--mp-action-width-v40, 960px), calc(100vw - 24px)) !important;
        min-width: min(640px, calc(100vw - 24px));
        max-width: calc(100vw - 24px) !important;
        min-height: 60px;
        justify-content: center;
        gap: 10px;
        padding: 8px 14px;
        transform: translateX(-50%) !important;
    }
    #gameScreen .game-action-button { min-height: 42px; padding: 9px 16px; font-size: 14px; }
    #gameScreen .selected-count { font-size: 12px; }
    #gameScreen.game-screen .table-play-zone > .draw-zone { top: 31% !important; }
    #gameScreen #discardPile { width: clamp(70px, 6.6vw, 100px) !important; }
    /* V41: enlarge the laid-out phase cards; keep the original desktop hand size. */
    #gameScreen #meldArea.mp-melds-center-v24 .meld-card { height: clamp(104px, 18vh, 184px) !important; max-height: clamp(104px, 18vh, 184px) !important; }
    #gameScreen.game-screen > #meldArea.meld-area.mp-melds-center-v24[data-meld-count="2"] { top: 54% !important; }
    #gameScreen #meldArea.mp-melds-center-v24[data-meld-count="2"] .meld-card { height: clamp(96px, 16vh, 164px) !important; max-height: clamp(96px, 16vh, 164px) !important; }
    #gameScreen #meldArea.mp-melds-center-v24[data-meld-count="3"] .meld-card,
    #gameScreen #meldArea.mp-melds-center-v24[data-meld-count="4"] .meld-card { height: clamp(78px, 9vh, 116px) !important; max-height: clamp(78px, 9vh, 116px) !important; }
    #gameScreen #meldArea.mp-melds-center-v24[data-meld-count="5"] .meld-card,
    #gameScreen #meldArea.mp-melds-center-v24[data-meld-count="6"] .meld-card { height: clamp(64px, 7.3vh, 94px) !important; max-height: clamp(64px, 7.3vh, 94px) !important; }
}
@media (max-width: 900px), (pointer: coarse) {
    #gameScreen #handShell.hand-shell {
        --mp-mobile-card-width-v40: clamp(48px, 14vw, 58px);
        left: 12px !important;
        right: 12px !important;
        width: calc(100% - 24px) !important;
        height: 140px !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
    }
    #gameScreen #handCards.hand-cards { justify-content: flex-start !important; padding: 24px 0 2px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; }
    #gameScreen #handCards.hand-cards .hand-card {
        flex: 0 0 var(--mp-mobile-card-width-v40) !important;
        width: var(--mp-mobile-card-width-v40) !important;
        height: calc(var(--mp-mobile-card-width-v40) * 1.51515) !important;
        margin-left: var(--overlap, -18px) !important;
        transform: translateY(var(--lift, 0)) !important;
    }
    #gameScreen #handCards.hand-cards .hand-card:first-child { margin-left: auto !important; }
    #gameScreen #handCards.hand-cards .hand-card:last-child { margin-right: auto !important; }
    #gameScreen #handCards.hand-cards .hand-card .fairy-card,
    #gameScreen #handCards.hand-cards .hand-card .card-png { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; transform: none !important; }

    #gameScreen .draw-zone > #deckPile {
        width: 58px !important;
        min-width: 58px !important;
        height: 88px !important;
    }
    #gameScreen #deckPile .card-back { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; }
    #gameScreen #discardPile { width: 46px !important; min-width: 46px !important; }
    #gameScreen.game-screen .table-play-zone > .draw-zone { gap: 14px !important; }

    #gameScreen.game-screen > #meldArea.meld-area.mp-melds-center-v24 {
        overflow: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        padding: 10px 8px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        align-items: center !important;
    }
    #gameScreen #meldArea.mp-melds-center-v24 .player-meld-cluster { flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
    #gameScreen #meldArea.mp-melds-center-v24 .meld-cards { gap: 3px !important; }
    #gameScreen #meldArea.mp-melds-center-v24 .table-meld::before { min-width: 0 !important; max-width: 100% !important; overflow: hidden; text-overflow: ellipsis; }
    #gameScreen #meldArea.mp-melds-center-v24 .meld-card { height: 36px !important; max-height: 36px !important; }
}
@media (max-width: 900px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
    #gameScreen.game-screen .table-play-zone > .draw-zone { left: 22% !important; top: 44% !important; }
    #gameScreen.game-screen > #meldArea.meld-area.mp-melds-center-v24 {
        left: 63% !important;
        top: 49% !important;
        width: 42vw !important;
        max-width: 42vw !important;
        height: 40vh !important;
        max-height: 40vh !important;
    }
}
@media (max-width: 900px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
    #gameScreen.game-screen .table-play-zone > .draw-zone { left: 20% !important; top: 25% !important; }
    #gameScreen.game-screen > #meldArea.meld-area.mp-melds-center-v24 {
        left: 55% !important;
        top: 54% !important;
        width: 78vw !important;
        max-width: 78vw !important;
        height: 28vh !important;
        max-height: 28vh !important;
    }
    #gameScreen .table-player.own-player { left: 4% !important; top: 66% !important; width: 120px !important; transform: none !important; }
}

/* The full-screen player layer must not intercept taps on the card piles. */
#gameScreen.game-screen > #gamePlayers.game-players { pointer-events: none !important; }

@media (max-width: 900px), (pointer: coarse) {
    #gameScreen #meldArea.meld-area.mp-melds-center-v24[data-meld-count] .meld-card { height: 36px !important; max-height: 36px !important; }
}

/* V42: brighter, halo-free laid-out mobile cards, exactly 7% larger. */
@media (max-width: 900px), (pointer: coarse) {
    #gameScreen #meldArea.meld-area.mp-melds-center-v24[data-meld-count] .meld-card {
        height: 38.52px !important;
        max-height: 38.52px !important;
        opacity: 1 !important;
        filter: none !important;
        box-shadow: none !important;
    }
    #gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-card .card-png {
        opacity: 1 !important;
        filter: brightness(1.42) contrast(1.09) saturate(1.26) brightness(1.29) contrast(1.07) saturate(1.20) !important;
        box-shadow: none !important;
        mix-blend-mode: normal !important;
    }
    #gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-card .fairy-card {
        filter: none !important;
        box-shadow: none !important;
    }
    #gameScreen #meldArea.meld-area.mp-melds-center-v24 .table-meld,
    #gameScreen #meldArea.meld-area.mp-melds-center-v24 .table-meld.can-hit {
        animation: none !important;
        filter: none !important;
        box-shadow: none !important;
    }
    #gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-cards,
    #gameScreen #meldArea.meld-area.mp-melds-center-v24 .table-meld.can-hit .meld-cards {
        filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)) !important;
        box-shadow: none !important;
    }
}

#gameScreen .mp-turn-magic-v42 { display: none !important; }
@media (max-width: 900px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
    #gameScreen.game-screen > *:not(.landscape-note):not(#turnBanner),
    #gameScreen.game-screen > *:not(.landscape-note):not(#turnBanner) * { visibility: visible !important; }
}
@media (max-width: 900px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
    #gameScreen.game-screen > *:not(.landscape-note) {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    #gameScreen.game-screen > .mp-turn-magic-v42 {
        position: absolute;
        inset: 0;
        z-index: 2147480100;
        display: grid !important;
        place-items: center;
        place-content: normal;
        overflow: auto;
        isolation: isolate;
        padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
        background: radial-gradient(ellipse at 50% 33%, #4a286680, transparent 57%), linear-gradient(160deg, #111326ee, #160e26f5 60%, #061b1df5);
        color: #fff1d0;
        text-align: center;
    }
    #gameScreen .mp-turn-magic-v42::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: url("table-bg.png") center / auto 100%;
        opacity: .18;
        filter: blur(5px);
        pointer-events: none;
    }
    #gameScreen .mp-turn-panel {
        position: relative;
        width: min(100%, 390px);
        padding: 30px 14px;
        border-radius: 36px;
        background: radial-gradient(ellipse at 50% 40%, #8246b22b, transparent 70%);
    }
    #gameScreen .mp-turn-kicker { color: #d5b8ec; font: 500 11px/1.6 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .16em; }
    #gameScreen .mp-turn-orb { position: relative; display: grid; place-items: center; width: 230px; height: 230px; margin: 26px auto 20px; border-radius: 50%; background: radial-gradient(circle, #b283dc25, #a270d015 48%, transparent 70%); }
    #gameScreen .mp-turn-ring { position: absolute; inset: 14px; border: 1px solid #d7b5fb35; border-radius: 50%; box-shadow: 0 0 38px #bd8be32b, inset 0 0 38px #bd8be318; }
    #gameScreen .mp-turn-ring::before, #gameScreen .mp-turn-ring::after { content: "✦"; position: absolute; color: #ffe6a6; font-size: 21px; text-shadow: 0 0 12px #ffd479; }
    #gameScreen .mp-turn-ring::before { top: 22px; right: 11px; animation: mp-turn-twinkle-v42 3s ease-in-out infinite; }
    #gameScreen .mp-turn-ring::after { left: 10px; bottom: 22px; animation: mp-turn-twinkle-v42 3s -1.5s ease-in-out infinite; }
    #gameScreen .mp-turn-phone { width: 83px; height: 137px; filter: drop-shadow(0 0 18px #a476d070); animation: mp-turn-phone-v42 4.8s ease-in-out infinite; }
    #gameScreen .mp-turn-arrow { position: absolute; right: 17px; bottom: 23px; width: 47px; height: 47px; opacity: .9; animation: mp-turn-arrow-v42 4.8s ease-in-out infinite; }
    #gameScreen .mp-turn-panel h2 { margin: 0; font: 700 clamp(26px, 7.6vw, 34px)/1.18 Georgia, serif; color: #ffebbc; text-shadow: 0 2px 16px #d6a76735; }
    #gameScreen .mp-turn-panel p { margin: 18px 0 0; color: #e4d7ed; font: 400 14px/1.7 system-ui, sans-serif; }
    #gameScreen .mp-turn-footnote { margin-top: 26px; font: 400 11px/1.7 system-ui, sans-serif; letter-spacing: .05em; color: #b9abbf; }
    #gameScreen .mp-turn-stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    #gameScreen .mp-turn-stars i { position: absolute; left: var(--x); top: var(--y); color: #ffe8af; font-size: var(--size); font-style: normal; text-shadow: 0 0 12px #ebb0ff; opacity: .35; animation: mp-turn-twinkle-v42 4s var(--delay) ease-in-out infinite; }
}
@keyframes mp-turn-phone-v42 { 0%, 15%, 100% { transform: rotate(0deg) translateY(0); } 48%, 68% { transform: rotate(-90deg) translateY(-3px); } 84% { transform: rotate(-90deg) translateY(0); } }
@keyframes mp-turn-arrow-v42 { 0%, 15%, 100% { opacity: .35; transform: rotate(-12deg); } 45%, 75% { opacity: 1; transform: rotate(12deg); } }
@keyframes mp-turn-twinkle-v42 { 0%, 100% { opacity: .25; transform: scale(.7) translateY(0); } 50% { opacity: .95; transform: scale(1.15) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
    #gameScreen .mp-turn-phone, #gameScreen .mp-turn-arrow, #gameScreen .mp-turn-stars i,
    #gameScreen .mp-turn-ring::before, #gameScreen .mp-turn-ring::after { animation: none !important; }
    #gameScreen .mp-turn-phone { transform: rotate(-90deg); }
}

/* V43: explicit card dimensions avoid zero-width faces and nested iOS filters. */
@media (max-width: 900px), (pointer: coarse) {
    #gameScreen #meldArea.meld-area.mp-melds-center-v24[data-meld-count] .meld-card {
        position: relative !important;
        width: 25.4232px !important;
        min-width: 25.4232px !important;
        max-width: 25.4232px !important;
        flex: 0 0 25.4232px !important;
        height: 38.52px !important;
        overflow: visible !important;
        filter: none !important;
    }
    #gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-card > .fairy-card {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        overflow: visible !important;
        filter: none !important;
    }
    #gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-card .card-png {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
}



/* V44: settled cards keep the ordinary hand's colour treatment in every turn.
   Apply colour once, to the image; interaction and flight effects only affect
   position. Disabled piles still use their existing disabled click behaviour. */
#gameScreen #meldArea.meld-area.mp-melds-center-v24,
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .player-meld-cluster,
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .table-meld,
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .table-meld.can-hit,
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-cards,
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .table-meld.can-hit .meld-cards,
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-card,
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-card .fairy-card,
#gameScreen #discardPile.card-pile,
#gameScreen #discardPile.card-pile #discardCard,
#gameScreen #discardPile.card-pile #discardCard .fairy-card {
    filter: none !important;
    opacity: 1 !important;
}
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .table-meld {
    animation: none !important;
    box-shadow: none !important;
}
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-card .card-png,
#gameScreen #discardPile.card-pile #discardCard .card-png {
    filter: brightness(1.42) contrast(1.09) saturate(1.26) brightness(1.29) contrast(1.07) saturate(1.20) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    animation: none !important;
}

/* V45: mobile table pixels already contain their permanent colour treatment. */
#gameScreen #meldArea.meld-area.mp-melds-center-v24 .meld-card .card-png.mp-baked-bright-v45,
#gameScreen #discardPile.card-pile #discardCard .card-png.mp-baked-bright-v45 {
    filter: none !important;
}

/* A moonlit portal and a real, star-tipped loading path. */
dialog.mp-game-loading-v38 {
    --mp-load: 0%; width: min(540px, calc(100vw - 28px));
    outline: none; border-radius: 28px; overflow: auto;
}
dialog.mp-game-loading-v38::backdrop {
    background: radial-gradient(ellipse at center, #34144e88, #070b18ee 75%);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.mp-magic-loader-v45 {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(24px, 5vw, 46px); border: 1px solid #dec38066;
    background: radial-gradient(ellipse at 50% 6%, #72418e66, transparent 60%), linear-gradient(155deg, #182039, #241630 65%, #0c1524);
    box-shadow: inset 0 0 60px #a570ff14, 0 0 65px #ad7fee20;
}
.mp-magic-loader-v45::before, .mp-magic-loader-v45::after {
    content: ''; position: absolute; inset: 10px; border: 1px solid #b8a07c33;
    border-radius: 18px; pointer-events: none;
}
.mp-magic-loader-v45::after { inset: auto -15% -90px; height: 180px; background: #75599d22; filter: blur(30px); border: none; }
.mp-loader-sky { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.mp-loader-sky i { position: absolute; color: #f4dc99; font-style: normal; text-shadow: 0 0 14px #df9fff; animation: mp-loader-twinkle-v45 3s ease-in-out infinite alternate; }
.mp-loader-sky i:nth-child(1) { left: 12%; top: 19%; }
.mp-loader-sky i:nth-child(2) { left: 82%; top: 14%; animation-delay: -.7s; }
.mp-loader-sky i:nth-child(3) { left: 90%; top: 54%; animation-delay: -1.6s; }
.mp-loader-sky i:nth-child(4) { left: 6%; top: 67%; animation-delay: -.3s; }
.mp-loader-sky i:nth-child(5) { left: 71%; top: 84%; animation-delay: -2.1s; }
.mp-loader-emblem { position: relative; width: 80px; height: 80px; margin: 0 auto 20px; display: grid; place-items: center; color: #ffe7a4; font: 42px/1 Georgia, serif; text-shadow: 0 0 24px #c188ff; }
.mp-loader-emblem::before { content: ''; position: absolute; inset: 0; border: 1px solid #e2ce9177; border-radius: 50%; border-top-color: #fff3c2; box-shadow: 0 0 26px #b780ff44; animation: mp-loader-orbit-v45 12s linear infinite; }
.mp-loader-emblem span { position: absolute; right: -4px; top: -5px; font-size: 23px; }
.mp-loader-eyebrow { font: 700 10px/1.5 system-ui, sans-serif; letter-spacing: .24em; color: #c7a8e8; }
.mp-magic-loader-v45 h2 { margin: 12px 0; font-size: clamp(25px, 5vw, 36px); color: #fff0c8; text-shadow: 0 0 24px #bd81dd55; }
.mp-magic-loader-v45 > p { font-size: 14px; color: #d0c9dc; }
.mp-loader-path { position: relative; margin-top: 30px; }
.mp-loader-path progress { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
.mp-loader-track { height: 15px; position: relative; border: 1px solid #d9be7c66; border-radius: 99px; background: #070c1c; box-shadow: inset 0 2px 7px #000a, 0 0 20px #b583e522; }
.mp-loader-fill { position: absolute; inset: 3px auto 3px 3px; width: max(0px, calc(var(--mp-load) - 6px)); border-radius: inherit; background: linear-gradient(90deg, #68489b, #b784ea 55%, #ffe6a2); box-shadow: 0 0 16px #cb99ef99; transition: width .18s ease; overflow: hidden; }
.mp-loader-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 20%, #fff8 50%, transparent 80%); animation: mp-loader-shimmer-v45 2.2s linear infinite; }
.mp-loader-star { position: absolute; left: clamp(6px, var(--mp-load), calc(100% - 6px)); top: 50%; transform: translate(-50%, -50%); color: #fff0bd; font-size: 24px; text-shadow: 0 0 8px #fff0a4, 0 0 18px #c98aff; transition: left .18s ease; }
.mp-magic-loader-v45 .mp-loading-count { font-size: 12px; color: #e2cea1; margin: 17px 0 0; }
@keyframes mp-loader-twinkle-v45 { from { opacity: .25; transform: scale(.7); } to { opacity: 1; transform: scale(1.15); } }
@keyframes mp-loader-orbit-v45 { to { transform: rotate(360deg); } }
@keyframes mp-loader-shimmer-v45 { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (max-height: 440px) and (orientation: landscape) {
    .mp-magic-loader-v45 { padding: 18px 34px; }
    .mp-loader-emblem { width: 48px; height: 48px; margin-bottom: 8px; font-size: 30px; }
    .mp-magic-loader-v45 h2 { margin: 7px 0; font-size: 26px; }
    .mp-loader-path { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .mp-loader-sky i, .mp-loader-emblem::before, .mp-loader-fill::after { animation: none; }
    .mp-loader-fill, .mp-loader-star { transition: none; }
}

/* V52: the latest drawn card keeps its label through sorting and polling. */
#gameScreen #handCards .hand-card.has-new-marker:not(.selected){z-index:5}
#gameScreen #handCards .hand-card>.mp-new-card-marker{
 position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
 z-index:30;display:block;width:max-content;padding:2px 7px;border-radius:7px;
 font:900 10px/1.2 system-ui,sans-serif;letter-spacing:.09em;
 color:#fff0bc;background:linear-gradient(135deg,#312047,#121526);
 border:1px solid #e6c775;box-shadow:0 2px 7px #0009;
 pointer-events:none;white-space:nowrap;
}
@media(max-width:900px),(pointer:coarse){
 #gameScreen #handCards .hand-card>.mp-new-card-marker{font-size:10px;padding:2px 6px;bottom:calc(100% + 3px)}
}

/* V64: no rectangular glass/glow surfaces behind real hand-card artwork. */
#gameScreen #handCards .hand-card,
#gameScreen #handCards .hand-card:hover,
#gameScreen #handCards .hand-card.selected,
#gameScreen #handCards .hand-card:focus-visible {
    box-shadow: none !important;
    background: transparent !important;
}
#gameScreen #handCards .hand-card .fairy-card.has-card-png,
#gameScreen #handCards .hand-card .fairy-card.has-card-png:hover,
#gameScreen #handCards .hand-card.selected .fairy-card.has-card-png {
    box-shadow: none !important;
    background: transparent !important;
}
#gameScreen #handCards .hand-card:focus-visible {
    outline: 2px solid #fff0b3;
    outline-offset: 3px;
}