:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #132a22;
  color: #17201d;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #275a47, #10251e 70%); }
main { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 80px; }
.hero { color: white; margin-bottom: 28px; }
.hero h1 { font-family: Georgia, serif; font-size: clamp(2.3rem, 6vw, 4.8rem); margin: 4px 0 10px; font-weight: 500; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 800; margin: 0; }
.status, .hint { opacity: .75; }
.field-hint { margin-top: -10px; color: #657068; font-size: .78rem; line-height: 1.4; }
.session-line { display: flex; align-items: center; gap: 14px; }
.text-button { padding: 0; background: transparent; color: white; text-decoration: underline; }
.panel, #game-panel { background: #f7f2e7; border-radius: 24px; padding: clamp(20px, 4vw, 40px); box-shadow: 0 24px 70px #06110c99; }
.hidden { display: none !important; }
.auth-single { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; align-items: end; gap: clamp(30px, 6vw, 80px); }
.auth-single h2 { margin-top: 0; }
form { display: grid; gap: 18px; max-width: 440px; }
label { display: grid; gap: 7px; font-weight: 700; }
input, select { width: 100%; padding: 13px 15px; border: 1px solid #a7aa9f; border-radius: 10px; font: inherit; background: white; }
button { border: 0; border-radius: 10px; padding: 12px 16px; font: inherit; font-weight: 800; background: #ba542f; color: white; cursor: pointer; }
button.secondary { background: #dcd4c4; color: #28362f; }
button.danger { background: #8f3028; }
.button-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 12px 16px; font-weight: 800; background: #ba542f; color: white; text-decoration: none; }
.secondary-link { background: #dcd4c4; color: #28362f; }
button:disabled { cursor: default; }
.table-heading, .hand-heading, .join-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.table-heading h2 { margin: 5px 0 0; font-family: Georgia, serif; font-size: 2rem; }
.badge { background: #1f4b3a; color: white; border-radius: 999px; padding: 8px 13px; }
.table-tools { display: flex; align-items: center; gap: 10px; }
.table-tools button { padding: 9px 12px; }
.icon-tool, .round-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: #dcd4c4; color: #28362f; font-size: 1.25rem; }
.table-stage { position: relative; min-height: 760px; margin: 24px 0 0; border-radius: 46% / 16%; overflow: hidden; background: radial-gradient(ellipse at center, #2b7755 0%, #174a34 67%, #103526 100%); border: 12px solid #68452e; box-shadow: inset 0 0 50px #051a1099, 0 14px 30px #17312633; color: white; }
.players { position: absolute; inset: 0; pointer-events: none; }
.player { position: absolute; z-index: 8; display: grid; gap: 5px; width: min(230px, 30%); background: #f7f2e7; color: #17201d; border-radius: 18px; padding: 12px 15px; box-shadow: 0 8px 22px #06110c66; pointer-events: auto; }
.player.seat-self { left: 50%; bottom: 214px; transform: translateX(-50%); }
.player.seat-left { left: 18px; top: 34px; }
.player.seat-right { right: 18px; top: 34px; }
.player.current-player { outline: 4px solid #f2c14e; }
.player span { font-size: .8rem; color: #657068; }
.player.connection-lost { opacity: .58; }
.trick-stack { position: absolute; right: -10px; bottom: -12px; width: 31px; height: 23px; }
.trick-stack::before, .trick-stack::after { content: ""; position: absolute; width: 22px; height: 14px; border: 2px solid white; border-radius: 3px; background: #a33d31; box-shadow: 0 2px 5px #0007; transform: rotate(-8deg); }
.trick-stack::after { left: 6px; top: 4px; transform: rotate(7deg); }
.turn-bubble { position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%); white-space: nowrap; background: white; color: #17201d !important; border-radius: 999px; padding: 7px 11px; box-shadow: 0 4px 10px #06110c55; }
.table-center { position: absolute; z-index: 4; inset: 145px 18% 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; min-height: 44px; }
.table-center .actions { justify-content: center; }
.bid-entry { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 2px; }
.bid-entry label { display: flex; align-items: center; gap: 10px; }
.bid-entry input { width: 100px; }
.contract-choices, .announcement-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.actions button.selected-action { background: #f2c14e; color: #18241f; outline: 2px solid white; }
.message { margin: 18px 0; border-left: 4px solid #ba542f; background: #f2d8ce; padding: 12px 16px; border-radius: 8px; }
.assigned-rooms, .admin-list { display: grid; gap: 10px; }
.assigned-room, .admin-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 12px; background: #e8e2d5; }
.assigned-room span, .admin-row span { color: #59665f; font-size: .88rem; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-heading h2 { margin: 4px 0 0; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 30px 0; }
.admin-grid-three { grid-template-columns: repeat(3, 1fr); }
.admin-grid h3 { margin-top: 0; }
.password-reset { display: flex; gap: 8px; }
.password-reset input { min-width: 180px; }
.admin-panel section { margin-top: 30px; }
.admin-row-stack { align-items: stretch; flex-direction: column; }
.row-actions, .menu-actions, .database-actions, .profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.group-statistics { font-size: .85rem; line-height: 1.5; color: #3f4f47; }
.database-actions { margin: 22px 0 30px; }
fieldset { border: 1px solid #c8c0b1; border-radius: 10px; }
.check-list { display: grid; gap: 7px; max-height: 190px; overflow: auto; }
.check-list label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check-list input { width: auto; }
.inline-check-list { display: flex; flex-wrap: wrap; max-height: none; }
.inline-check-list label { padding: 6px 9px; border-radius: 999px; background: #f7f2e7; }
.profile-history { margin-top: 26px; padding: 18px; border-radius: 16px; background: #eee7da; }
.result-panel { margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: #f7f2e7; color: #17201d; }
.result-panel h3, .history-panel h3 { margin-top: 0; }
.result-summary { font-size: 1.1rem; font-weight: 800; }
.result-details { margin-bottom: 0; color: #4f5d55; }
.trick-area { position: relative; width: 310px; height: 210px; margin: 8px 0 0; }
.trick-cards { position: absolute; inset: 0; }
.table-side-button { position: absolute; z-index: 10; right: 18px; top: 48%; width: 45px; height: 45px; padding: 0; border-radius: 50%; background: #f7f2e7; color: #183b2d; font-size: 1.5rem; box-shadow: 0 6px 14px #06110c66; }
.open-hand-panel { margin-bottom: 26px; padding: 18px 20px; border-radius: 14px; background: #efe9dc; }
.open-hand-panel h3 { margin-top: 0; }
.cards { display: flex; flex-wrap: wrap; gap: 9px; }
.card { position: relative; width: 82px; height: 124px; overflow: hidden; background: linear-gradient(135deg, #fff, #f7f4eb); border: 1px solid #c6bcaa; box-shadow: 0 5px 12px #07180f55; color: #151a18; font-family: Georgia, serif; font-size: 1.2rem; padding: 5px; }
.card-corner { position: absolute; top: 6px; left: 7px; display: grid; line-height: .9; text-align: center; white-space: pre-line; }
.card-corner.bottom { inset: auto 7px 6px auto; transform: rotate(180deg); }
.card-pip { font-size: 3rem; line-height: 1; margin: auto; }
.card-rank-name { display: none; }
.card.compact .card-pip { font-size: 1.8rem; }
.card.compact .card-rank-name { display: block; position: absolute; inset: 42% 5px auto; font-size: .72rem; text-align: center; }
.card.red { color: #b12626; }
.card-back { background-color: #f3ead8; background-image: repeating-linear-gradient(45deg, #8b2f2f 0 4px, #f3ead8 4px 8px); border: 7px solid white; }
.card.selected { transform: translateY(-12px); outline: 3px solid #ba542f; }
.hand { position: relative; justify-content: center; min-height: 150px; padding: 20px 0 0; }
.hand.fan { flex-wrap: nowrap; gap: 0; }
.hand.fan .card { margin-left: -25px; transform: rotate(var(--fan-angle)) translateY(var(--fan-lift)); transform-origin: 50% 150%; }
.hand.fan .card:first-child { margin-left: 0; }
.hand .card:not(:disabled):hover { translate: 0 -8px; z-index: 20; }
.played-card { position: absolute; }
.played-card.new-card { animation: lay-card .55s cubic-bezier(.2,.8,.2,1) both; }
.played-card .card { width: 76px; height: 115px; }
.played-card.from-self { left: 117px; top: 84px; --from-x: 0; --from-y: 250px; --card-rotation: 0deg; }
.played-card.from-left { left: 53px; top: 26px; --from-x: -350px; --from-y: -150px; --card-rotation: -12deg; }
.played-card.from-right { right: 53px; top: 26px; --from-x: 350px; --from-y: -150px; --card-rotation: 12deg; }
.played-card.from-left .card { transform: rotate(-12deg); }
.played-card.from-right .card { transform: rotate(12deg); }
@keyframes lay-card { from { opacity: .25; transform: translate(var(--from-x), var(--from-y)) scale(.75); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
.played-card.collecting { animation: collect-trick .62s cubic-bezier(.55,0,.8,.35) both; }
.played-card.collect-left { --collect-x: -330px; --collect-y: -145px; }
.played-card.collect-right { --collect-x: 330px; --collect-y: -145px; }
.played-card.collect-self { --collect-x: 0; --collect-y: 225px; }
@keyframes collect-trick { to { opacity: 0; transform: translate(var(--collect-x), var(--collect-y)) scale(.35); } }
.played-card.recalled-card.recall-in { animation: recall-trick-in .34s ease-out both; }
.played-card.recalled-card.recall-out { animation: recall-trick-out .34s ease-in both; }
@keyframes recall-trick-in { from { opacity: 0; transform: translateX(180px) scale(.35); } }
@keyframes recall-trick-out { to { opacity: 0; transform: translateX(180px) scale(.35); } }
.pressed-preview { min-height: 132px; justify-content: center; margin-top: 8px; }
.hand-zone { position: absolute; z-index: 7; left: 50%; bottom: 4px; width: min(92%, 850px); min-height: 200px; transform: translateX(-50%); }
.hand-zone .hand { padding-left: 58px; }
.card-controls { position: absolute; z-index: 30; left: 4px; top: 38px; display: grid; gap: 7px; }
.round-icon { width: 38px; height: 38px; background: #f7f2e7; box-shadow: 0 4px 10px #06110c66; }
.selection-label { position: absolute; left: 58px; bottom: 4px; font-size: .76rem; color: #e9f4ee; }
.score-overlay, .pause-overlay { position: absolute; z-index: 40; inset: 104px 8% 72px; border-radius: 22px; background: #f7f2e7f5; color: #17201d; padding: 22px; box-shadow: 0 20px 60px #07170fbb; overflow: auto; }
.score-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.score-heading h3 { margin: 4px 0 0; font-size: 1.45rem; }
.score-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 16px 0; }
.score-total, .stat-card { padding: 10px 12px; border-radius: 12px; background: #e7e0d3; }
.score-total strong { display: block; font-size: 1.25rem; }
.statistics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 18px; }
.stat-card { font-size: .8rem; }
.stat-card strong { display: block; font-size: .95rem; margin-bottom: 5px; }
.pause-overlay { inset: 0; display: grid; place-items: center; background: #092219df; }
.pause-card { max-width: 430px; text-align: center; color: white; }
.pause-symbol { display: block; font-size: 4rem; }
.pause-card button { margin-top: 12px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: 10px 12px; border-bottom: 1px solid #d3ccbd; text-align: left; white-space: nowrap; }
th { color: #657068; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.positive { color: #1f694b; font-weight: 800; }
.negative { color: #a43d2b; font-weight: 800; }

@media (max-width: 720px) {
  main { width: min(100% - 18px, 1100px); padding-top: 24px; }
  .auth-single, .admin-grid { grid-template-columns: 1fr; }
  .table-heading { align-items: flex-start; }
  .table-tools { align-items: flex-end; flex-direction: column; }
  .declaration-entry { grid-template-columns: 1fr; }
  .table-stage { min-height: 560px; border-width: 7px; border-radius: 28px; }
  .player { width: 42%; padding: 10px; }
  .player.seat-left { left: 8px; top: 18px; }
  .player.seat-right { right: 8px; top: 18px; }
  .player.seat-self { bottom: 170px; }
  .table-center { inset: 128px 3px 210px; }
  .table-stage { min-height: 690px; }
  .hand-zone { min-height: 165px; }
  .hand-zone .hand { padding-left: 42px; }
  .card-controls { left: 0; top: 24px; }
  .round-icon { width: 33px; height: 33px; font-size: 1rem; }
  .score-overlay { inset: 92px 3% 50px; padding: 15px; }
  .score-totals, .statistics { grid-template-columns: 1fr; }
  .card { width: 62px; height: 94px; padding: 5px; }
  .card-pip { font-size: 2.2rem; }
  .hand.fan .card { margin-left: -23px; }
  .assigned-room, .admin-row { align-items: stretch; flex-direction: column; }
  .password-reset { flex-direction: column; }
}

/* Die Spielansicht nutzt Breite und Höhe des Geräts; Verwaltungsseiten bleiben scrollbar. */
body:has(#game-panel:not(.hidden)) { height: 100dvh; min-height: 0; overflow: hidden; }
body:has(#game-panel:not(.hidden)) main { width: 100%; height: 100dvh; padding: 0; }
#game-panel:not(.hidden) { position: relative; width: 100%; height: 100dvh; padding: 0; border-radius: 0; background: #10251e; box-shadow: none; overflow: hidden; }
#game-panel .table-stage { --card-w: clamp(48px, min(7.4vw, 10.5dvh), 82px); --card-h: calc(var(--card-w) * 1.51); width: 100%; height: 100dvh; min-height: 0; margin: 0; border-width: clamp(5px, 1.1vw, 12px); border-radius: clamp(28px, 7vw, 76px); }
.table-heading-inset { position: absolute; z-index: 20; top: clamp(7px, 1.5dvh, 16px); left: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); color: white; pointer-events: none; }
.table-heading-inset .table-tools, .table-heading-inset .table-identity { pointer-events: auto; }
.table-identity { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 800; }
.table-identity #room-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#game-panel .table-tools { flex-direction: row; align-items: center; }
#game-panel .icon-tool { width: clamp(34px, 5.2dvh, 42px); height: clamp(34px, 5.2dvh, 42px); font-size: clamp(1rem, 2.8dvh, 1.25rem); }
#game-panel .badge { padding: 6px 10px; background: #f7f2e7dd; color: #183b2d; white-space: nowrap; font-size: clamp(.7rem, 1.8dvh, .9rem); }
#game-panel .player { width: min(28%, 230px); padding: clamp(7px, 1.5dvh, 12px) clamp(9px, 1.4vw, 15px); border-radius: 13px; font-size: clamp(.72rem, 2dvh, 1rem); }
#game-panel .player.seat-left { left: clamp(9px, 2vw, 24px); top: clamp(62px, 10dvh, 86px); }
#game-panel .player.seat-right { right: clamp(9px, 2vw, 24px); top: clamp(62px, 10dvh, 86px); }
#game-panel .player.seat-self { bottom: clamp(132px, 23dvh, 216px); }
#game-panel .turn-bubble { bottom: -31px; padding: 5px 9px; }
#game-panel .table-center { inset: clamp(118px, 20dvh, 165px) 12% clamp(160px, 28dvh, 260px); }
#game-panel .trick-area { width: clamp(210px, 35vw, 310px); height: clamp(130px, 25dvh, 210px); }
#game-panel .card { width: var(--card-w); height: var(--card-h); font-size: clamp(.8rem, 2.2dvh, 1.2rem); }
#game-panel .card-pip { font-size: calc(var(--card-w) * .56); }
#game-panel .played-card .card { width: calc(var(--card-w) * .92); height: calc(var(--card-h) * .92); }
#game-panel .played-card.from-self { left: calc(50% - var(--card-w) * .46); top: 42%; }
#game-panel .played-card.from-left { left: 18%; top: 8%; }
#game-panel .played-card.from-right { right: 18%; top: 8%; }
#game-panel .hand-zone { bottom: 0; width: min(96%, 900px); min-height: clamp(122px, 24dvh, 205px); }
#game-panel .hand { min-height: calc(var(--card-h) + 22px); padding-top: 17px; }
#game-panel .hand.fan .card { margin-left: calc(var(--card-w) * -.3); }
#game-panel .card-controls { top: 20%; }
#game-panel .round-icon { width: clamp(28px, 5dvh, 38px); height: clamp(28px, 5dvh, 38px); }
#game-panel .table-side-button { right: clamp(8px, 1.8vw, 18px); width: clamp(34px, 6dvh, 45px); height: clamp(34px, 6dvh, 45px); }
#game-panel .score-overlay { inset: clamp(58px, 9dvh, 104px) 3% clamp(16px, 5dvh, 60px); }
#game-panel .open-hand-panel { position: absolute; z-index: 35; left: 4%; right: 4%; top: 18%; margin: 0; max-height: 48%; overflow: auto; }

@media (max-width: 720px) {
  #game-panel .table-stage { border-radius: 28px; }
  #game-panel .player { width: 43%; }
  #game-panel .table-center { inset-left: 2%; inset-right: 2%; }
  #game-panel .actions { gap: 6px; }
  #game-panel .actions button { padding: 8px 10px; font-size: .78rem; }
  #game-panel .result-panel { font-size: .75rem; padding: 8px 10px; }
  #game-panel .result-panel h3 { display: none; }
  #game-panel .result-summary { margin: 0; font-size: .86rem; }
  #game-panel .result-details { margin-top: 4px; }
  #game-panel .score-totals, #game-panel .statistics { grid-template-columns: repeat(3, 1fr); }
}

@media (orientation: landscape) and (max-height: 620px) {
  #game-panel .table-stage { --card-w: clamp(38px, min(6.3vw, 12.5dvh), 58px); border-radius: 24px; }
  #game-panel .table-heading-inset { top: 5px; }
  #game-panel .table-identity { font-size: .72rem; }
  #game-panel .table-tools { gap: 5px; }
  #game-panel .player { width: 27%; max-width: 175px; padding: 5px 8px; line-height: 1.05; }
  #game-panel .player span { font-size: .65rem; }
  #game-panel .player.seat-left, #game-panel .player.seat-right { top: 49px; }
  #game-panel .player.seat-self { bottom: calc(var(--card-h) + 15px); }
  #game-panel .turn-bubble { bottom: -24px; padding: 3px 7px; }
  #game-panel .table-center { inset: 78px 22% calc(var(--card-h) + 63px); }
  #game-panel .trick-area { width: 220px; height: 115px; margin: 0; }
  #game-panel .hand-zone { min-height: calc(var(--card-h) + 14px); }
  #game-panel .hand { min-height: calc(var(--card-h) + 10px); padding-top: 7px; }
  #game-panel .card-controls { top: 2px; gap: 4px; }
  #game-panel .selection-label { display: none; }
  #game-panel .score-overlay { inset: 46px 2% 8px; padding: 10px; }
}