:root {
    --felt: #1f6b3a;
    --felt-dark: #154d29;
    --ink: #1d232a;
    --panel: #f7f5ef;
    --accent: #c62828;
    --gold: #f2c230;
    --hint: #29b6f6;
    --w-lg: clamp(56px, 5.6vw, 98px);
    --w-md: clamp(48px, 4.6vw, 82px);
    --w-sm: clamp(30px, 2.8vw, 50px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    color: var(--ink);
    background: #e9e6dc;
    -webkit-user-select: none;
    user-select: none;
}

button {
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #b9b3a3;
    background: #fff;
    padding: .45rem .8rem;
}

button:hover:not(:disabled) { background: #f1eee6; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.primary:hover { background: #a31f1f; }
button.link, button.link:hover:not(:disabled) { background: transparent; border: none; color: inherit; text-decoration: underline; padding: .3rem .5rem; }

/* Startbildschirm */
.start-screen { overflow: auto; height: 100%; padding: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; background: radial-gradient(circle at 50% 0, #2a8048, var(--felt-dark)); color: #fff; }
.start-head { text-align: center; max-width: 720px; }
.start-head h1 { font-size: 3rem; margin: 0; letter-spacing: .05em; }
.start-suits { display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; }
.start-icon { width: 56px; height: 56px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.game-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; width: min(1100px, 100%); }
.game-choice { background: var(--panel); color: var(--ink); border-radius: 14px; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.game-choice h2 { margin: 0 0 .5rem; }
.game-choice p { flex: 1; line-height: 1.45; }
.start-screen > .link { color: #fff; }

/* Spiel-Layout */
.game-layout {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 30%);
    grid-template-rows: auto auto 1fr;
    height: 100vh;
}
.game-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: .4rem 1rem; background: #2b2b2b; color: #fff; flex-wrap: wrap; }
.game-bar .mode { background: rgba(255,255,255,.12); padding: .15rem .6rem; border-radius: 6px; }
.game-bar .scores { margin-left: auto; display: flex; gap: 1rem; flex-wrap: wrap; }
.game-bar .goal { opacity: .7; }
.table { grid-column: 1; grid-row: 2 / 4; min-height: 0; }
.memory-side { grid-column: 2; grid-row: 2; padding: .5rem .5rem 0; background: #dcd8cc; }
.chat-side { grid-column: 2; grid-row: 3; min-height: 0; display: flex; background: #dcd8cc; padding: .5rem; }
.game-layout.no-memory .chat-side { grid-row: 2 / 4; }

@media (max-width: 1000px) {
    .game-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(520px, 1fr) auto 38vh; height: auto; min-height: 100vh; }
    .table { grid-row: 2; }
    .memory-side { grid-column: 1; grid-row: 3; }
    .chat-side, .game-layout.no-memory .chat-side { grid-column: 1; grid-row: 4; }
}

/* Tisch */
.table {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: ". top ." "left center right" "bottom bottom bottom";
    background: radial-gradient(ellipse at center, #2a8048 0%, var(--felt) 55%, var(--felt-dark) 100%);
    padding: .6rem 1rem;
    gap: .4rem;
    overflow: hidden;
}
.seat { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.seat-top { grid-area: top; }
.seat-left { grid-area: left; justify-content: center; }
.seat-right { grid-area: right; justify-content: center; }
.seat-bottom { grid-area: bottom; }
.seat-label { display: flex; gap: .4rem; align-items: center; color: #fff; font-weight: 600; flex-wrap: wrap; justify-content: center; }
.seat-label .link { color: #fff; }
.seat.active .seat-name { background: var(--gold); color: var(--ink); padding: 0 .5rem; border-radius: 6px; box-shadow: 0 0 10px var(--gold); }
.tag { font-size: .75rem; font-weight: 500; padding: .05rem .45rem; border-radius: 10px; background: rgba(0,0,0,.35); }
.tag.partner { background: #1565c0; }
.tag.chooser { background: #6a1b9a; }
.tag.void { background: #5d4037; }
.tag.your-turn { background: var(--gold); color: var(--ink); }

.hand { display: flex; align-items: flex-end; }
.hand.side { flex-direction: column; align-items: center; }
.seat-top .hand .jass-card + .jass-card { margin-left: calc(var(--w) * -.55); }
.hand.side .jass-card + .jass-card { margin-top: calc(var(--w) * -1.2); }
.hand.side .jass-card.face + .jass-card.face { margin-top: calc(var(--w) * -1.05); }
.hand.own { padding-top: 14px; gap: calc(var(--w) * .05); }

.table-center { grid-area: center; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; }

/* Karten */
.jass-card {
    --w: var(--w-md);
    width: var(--w);
    height: calc(var(--w) * 1.55);
    border-radius: calc(var(--w) * .08);
    position: relative;
    flex: none;
    transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.jass-card.lg { --w: var(--w-lg); }
.jass-card.md { --w: var(--w-md); }
.jass-card.sm { --w: var(--w-sm); }
.jass-card.back {
    background: repeating-linear-gradient(45deg, #b71c1c 0 5px, #d32f2f 5px 10px);
    border: calc(var(--w) * .06) solid #fff;
}
.jass-card.face { background: #fff; border: 1px solid #b4b4b4; overflow: hidden; }
.jass-card.face.trump { background: #fff7d9; }
.jass-card.playable { cursor: pointer; }
.jass-card.playable:hover { transform: translateY(-12px); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.jass-card.dimmed { opacity: .45; filter: grayscale(.6); }
.jass-card.hint { transform: translateY(-14px); box-shadow: 0 0 0 3px var(--hint), 0 0 18px var(--hint); }

/* Kartenbild nach dem Deutschschweizer Blatt: Zahl bzw. Figurenname in den Ecken, Symbole am Mittelstiel */
.jass-card { --stem: #2f6b3a; }
.jass-card.suit-Rosen { --stem: #2f7d32; }
.jass-card.suit-Schellen { --stem: #c4271f; }
.jass-card.suit-Schilten { --stem: #7d7d7d; }
.corner { position: absolute; z-index: 2; line-height: 1; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: calc(var(--w) * .15); color: #1d1d1d; }
.corner.name { font-family: inherit; font-size: calc(var(--w) * .085); letter-spacing: .02em; }
.corner.top { top: 3%; left: 6%; }
.corner.bottom { bottom: 3%; right: 6%; transform: rotate(180deg); }
.jass-card.sm .corner.name { display: none; }
.suit-icon { display: block; }
.suit-icon.mini { width: 1.05em; height: 1.05em; }
.center { position: absolute; inset: 12% 13%; display: flex; align-items: center; justify-content: center; }
.center.art { inset: 9% 5%; }
.pips { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; width: 100%; height: 100%; place-items: center; }
.pips::before { content: ""; position: absolute; left: 50%; top: 3%; bottom: 3%; width: calc(var(--w) * .025); transform: translateX(-50%); background: var(--stem); border-radius: 2px; }
.pips::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--w) * .1); height: calc(var(--w) * .1); transform: translate(-50%, -50%) rotate(45deg); background: var(--stem); }
.pips-7 .pip:nth-child(1), .pips-9 .pip:nth-child(5) { grid-column: 1 / -1; }
.suit-icon.pip { position: relative; z-index: 1; width: calc(var(--w) * .3); height: calc(var(--w) * .3); }
.pips-7 .suit-icon.pip, .pips-8 .suit-icon.pip { width: calc(var(--w) * .26); height: calc(var(--w) * .26); }
.pips-9 .suit-icon.pip { width: calc(var(--w) * .22); height: calc(var(--w) * .22); }
.banner-art { width: 100%; height: 100%; }
.suit-icon.banner-icon { position: absolute; width: calc(var(--w) * .26); height: calc(var(--w) * .26); }
.banner-icon.top { top: 2%; left: 2%; }
.banner-icon.bottom { bottom: 2%; right: 2%; }
.center.ace { flex-direction: column; justify-content: space-between; }
.suit-icon.ace-icon { width: calc(var(--w) * .5); height: calc(var(--w) * .5); }
.suit-icon.ace-icon.flipped { transform: rotate(180deg); }
.ace-ribbon { width: 95%; height: calc(var(--w) * .2); }
.figure { position: relative; width: 100%; height: 100%; }
.figure-art { width: 100%; height: 100%; }
.suit-icon.figure-icon { position: absolute; right: calc(var(--w) * .06); width: calc(var(--w) * .26); height: calc(var(--w) * .26); }
.figure-Ober .figure-icon { top: 12%; }
.figure-Under .figure-icon { top: 54%; }
.figure-Koenig .figure-icon { top: 40%; }

/* Stich */
.trick-area { position: relative; width: calc(var(--w-md) * 3.6); height: calc(var(--w-md) * 3.4); }
.trick-slot { position: absolute; transition: all .2s; }
.slot-bottom { left: 50%; bottom: 0; transform: translateX(-50%); }
.slot-top { left: 50%; top: 0; transform: translateX(-50%); }
.slot-left { left: 0; top: 50%; transform: translateY(-50%) rotate(-6deg); }
.slot-right { right: 0; top: 50%; transform: translateY(-50%) rotate(6deg); }
.trick-slot.winner .jass-card { box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold); }
.mode-badge { position: absolute; top: -.2rem; left: -1.5rem; display: flex; gap: .3rem; align-items: center; background: rgba(0,0,0,.45); color: #fff; padding: .2rem .55rem; border-radius: 8px; font-weight: 600; font-size: .9rem; }

.mode-chooser, .round-summary {
    position: absolute;
    inset: auto;
    background: var(--panel);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    text-align: center;
    max-width: 92%;
    z-index: 5;
}
.mode-chooser h3, .round-summary h3 { margin: 0 0 .7rem; }
.mode-buttons { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: .5rem; margin-bottom: .5rem; }
.mode-buttons button { display: flex; gap: .4rem; align-items: center; justify-content: center; font-weight: 600; padding: .6rem; }
.mode-buttons .push { grid-column: 1 / -1; background: #fff3e0; }
.round-summary table { margin: 0 auto .8rem; border-collapse: collapse; }
.round-summary td { padding: .2rem .7rem; text-align: right; }
.round-summary td:first-child { text-align: left; }
.round-summary .winner { font-size: 1.15rem; font-weight: 700; }

/* Kartengedächtnis */
.memory-panel { background: var(--panel); border-radius: 10px; padding: .5rem .7rem; font-size: .85rem; }
.memory-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.memory-grid { border-collapse: separate; border-spacing: 2px; width: 100%; }
.memory-grid th { width: 22px; }
.memory-grid td { text-align: center; border-radius: 4px; padding: 2px 0; font-weight: 600; }
.memory-grid td.played { background: #d6d2c6; color: #9a9588; text-decoration: line-through; }
.memory-grid td.mine { background: #bbdefb; }
.memory-grid td.out { background: #fff; border: 1px solid #c9c3b4; }
.memory-grid td.trump { outline: 2px solid var(--gold); }
.memory-grid td.bock { background: #ffe0b2; }
.memory-grid td.count { background: transparent; color: #6b6556; font-weight: 400; }
.memory-legend { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; font-size: .78rem; }
.memory-legend span.played, .memory-legend span.mine, .memory-legend span.out { padding: 0 .35rem; border-radius: 4px; }
.memory-legend .played { background: #d6d2c6; }
.memory-legend .mine { background: #bbdefb; }
.memory-legend .out { background: #fff; border: 1px solid #c9c3b4; }
.memory-hidden { color: #6b6556; }

/* Chat */
.chat-panel { display: flex; flex-direction: column; background: var(--panel); border-radius: 10px; width: 100%; min-height: 0; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem .8rem; border-bottom: 1px solid #ddd6c6; }
.chat-mode { font-size: .78rem; color: #6b6556; }
.chat-messages { flex: 1; overflow-y: auto; padding: .6rem; display: flex; flex-direction: column; gap: .45rem; -webkit-user-select: text; user-select: text; }
.msg { padding: .45rem .7rem; border-radius: 10px; max-width: 92%; line-height: 1.4; white-space: pre-wrap; font-size: .92rem; }
.msg-trainer { background: #fff; border: 1px solid #e0dacb; align-self: flex-start; }
.msg-lernender { background: #1565c0; color: #fff; align-self: flex-end; }
.msg-spiel { background: transparent; color: #6b6556; font-size: .8rem; align-self: center; padding: .1rem .4rem; text-align: center; }
.msg.typing { font-style: italic; color: #6b6556; }
.chat-quick { display: flex; gap: .3rem; flex-wrap: wrap; padding: .4rem .6rem 0; }
.chat-quick button { font-size: .8rem; padding: .25rem .5rem; }
.chat-input { display: flex; gap: .4rem; padding: .5rem .6rem .6rem; }
.chat-input input { flex: 1; font: inherit; padding: .45rem .6rem; border: 1px solid #b9b3a3; border-radius: 8px; -webkit-user-select: text; user-select: text; }

/* Einstellungen */
.settings-page { padding: 1.5rem 2rem; max-width: 760px; margin: 0 auto; overflow: auto; height: 100%; }
.settings-page section { background: var(--panel); border-radius: 12px; padding: .8rem 1.2rem 1rem; margin-bottom: 1rem; }
.settings-page h2 { font-size: 1.1rem; }
.settings-page label { display: flex; gap: .6rem; align-items: center; margin: .45rem 0; flex-wrap: wrap; }
.settings-page input:not([type=checkbox]), .settings-page select { font: inherit; padding: .35rem .5rem; border: 1px solid #b9b3a3; border-radius: 6px; min-width: 260px; -webkit-user-select: text; user-select: text; }
.settings-page .hint { color: #5d584c; font-size: .9rem; }
.settings-actions { display: flex; gap: 1rem; align-items: center; }
.saved { color: #2e7d32; font-weight: 600; }

.status-bar-safe-area { display: none; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* Online */
.online-entry { font-size: 1.05rem; padding: .7rem 1.4rem; }
.lobby-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: center; background: var(--panel); color: var(--ink); border-radius: 14px; padding: .7rem 1.2rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.lobby-bar label { display: flex; gap: .5rem; align-items: center; font-weight: 600; }
.lobby-bar input, .game-choice select, .code-input { font: inherit; padding: .4rem .6rem; border: 1px solid #b9b3a3; border-radius: 8px; -webkit-user-select: text; user-select: text; }
.code-input { font-size: 1.4rem; letter-spacing: .25em; text-transform: uppercase; text-align: center; }
.online-status { font-size: .85rem; padding: .15rem .6rem; border-radius: 10px; background: #e0dacb; }
.online-status.status-connected { background: #c8e6c9; }
.online-status.status-reconnecting, .online-status.status-connecting { background: #fff3e0; }
.online-error { background: #ffebee; color: #b71c1c; border-radius: 8px; padding: .5rem .8rem; margin: .4rem; }
.open-tables { list-style: none; padding: 0; margin: 0 0 .6rem; flex: 1; }
.open-tables li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid #e0dacb; }
.table-code { font-family: Consolas, monospace; letter-spacing: .15em; background: rgba(0,0,0,.25); padding: 0 .4rem; border-radius: 8px; }
.waiting-room { background: var(--panel); color: var(--ink); border-radius: 14px; padding: 1rem 1.4rem; min-width: min(420px, 100%); box-shadow: 0 6px 18px rgba(0,0,0,.25); text-align: center; }
.waiting-room h2 { margin-top: 0; }
.waiting-room ul { list-style: none; padding: 0; text-align: left; }
.waiting-room li { display: flex; justify-content: space-between; padding: .4rem .6rem; border-radius: 8px; }
.waiting-room li.me { background: #bbdefb; }
.login-card { background: var(--panel); color: var(--ink); border-radius: 14px; padding: 1.2rem 1.6rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: .7rem; min-width: min(380px, 100%); }
.login-card label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.login-card input { font: inherit; padding: .45rem .6rem; border: 1px solid #b9b3a3; border-radius: 8px; -webkit-user-select: text; user-select: text; }
.login-card .hint { margin: 0; font-size: .85rem; color: #5d584c; }
.login-actions { display: flex; gap: .6rem; }
.lobby-bar.my-tables { background: #fff8e1; }