/* Supplied artwork is displayed intact; no generated character or background. */
.game-catalog { grid-template-columns: repeat(5,minmax(0,1fr)); }
.game-choice { padding: 17px 14px; gap: 10px; }
.games-layout.ddz-mode { grid-template-columns: minmax(0,1fr); }
.ddz-shell { min-width: 0; --ddz-ink: #27354e; --ddz-pink: #ba4e86; color: var(--ddz-ink); }
.ddz-shell [hidden] { display: none !important; }
.ddz-shell button, .ddz-shell input { font: inherit; }
.ddz-shell .btn { min-height: 42px; background: #775bba; color: #fff; }
.ddz-shell .btn.ghost { background: #eee8f8; color: #624694; }
.ddz-shell button:disabled { opacity: .45; cursor: not-allowed; }
.ddz-shell button:focus-visible { outline: 3px solid #b980e2; outline-offset: 3px; }
.ddz-intro { padding: 30px; border-radius: 22px; background: linear-gradient(90deg,rgba(248,248,255,.97) 5%,rgba(248,248,255,.86) 55%,rgba(248,248,255,.3)),url('/assets/doudizhu/background.png') center 38%/cover; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 170px; border: 1px solid #fff; }
.ddz-kicker { color: #956397; font-size: 12px; letter-spacing: .16em; }
.ddz-intro h2 { color: #3f375d; font: 800 34px/1.5 var(--font-display); margin: 5px 0 10px; }
.ddz-intro p { font-size: 14px; color: #647089; line-height: 1.9; }
.ddz-connection { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 30px; background: #ffffffd9; color: #587265; font-size: 12px; white-space: nowrap; }
.ddz-connection::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #70a184; }
.ddz-lobby-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 20px; margin-top: 20px; }
.ddz-lobby-card { background: rgb(var(--srgb) / .95); color: var(--txt); padding: 26px; border-radius: 20px; border: 1px solid var(--surface-border); min-width: 0; }
.ddz-lobby-card h3 { font-size: 19px; margin-bottom: 8px; color: var(--txt-strong); }
.ddz-lobby-card p { color: var(--txt-mute); font-size: 13px; line-height: 1.8; }
.ddz-characters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 18px 0 22px; }
.ddz-character { position: relative; border: 2px solid transparent; border-radius: 14px; padding: 4px; background: var(--surface-2); cursor: pointer; min-width: 0; color: var(--txt-soft); }
.ddz-character.chosen { border-color: #a580ca; background: #eee6f6; color: #664685; }
.ddz-character img { display: block; width: 100%; aspect-ratio: .8; object-fit: cover; object-position: center 20%; border-radius: 10px; background: #fff; }
.ddz-character:nth-child(2) img { object-fit: contain; }
.ddz-character span { display: block; text-align: center; font-size: 12px; padding: 8px 0 5px; }
.ddz-lobby-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ddz-join-form { display: flex; gap: 8px; margin: 18px 0; }
.ddz-join-form input { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-divider); border-radius: 12px; background: var(--surface-2); color: var(--txt); letter-spacing: .12em; }
.ddz-join-form .btn { flex: none; }
.ddz-room-list { display: grid; gap: 8px; max-height: 230px; overflow: auto; }
.ddz-room-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--line-divider); border-radius: 12px; background: var(--surface-2); color: var(--txt); cursor: pointer; }
.ddz-room-item b,.ddz-room-item small { display: block; overflow-wrap: anywhere; }
.ddz-room-item b { font-size: 13px; }.ddz-room-item small { margin-top: 4px; font-size: 11px; color: var(--txt-mute); }
.ddz-room-item > span:last-child { white-space: nowrap; font-size: 12px; color: var(--primary); }
.ddz-empty { padding: 22px 0; }
.ddz-auth { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ddz-room { border-radius: 22px; overflow: hidden; border: 1px solid #fff; background: #e7eef3; }
.ddz-room-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 22px; background: #f8f5fd; }
.ddz-room-top strong { font: 800 20px/1.4 ui-monospace,monospace; letter-spacing: .08em; }
.ddz-room-top small { color: #7d7590; font-size: 12px; }
.ddz-room-buttons { display: flex; gap: 8px; }
.ddz-room-top .btn { padding: 8px 12px; min-height: 38px; font-size: 12px; }
.ddz-table { position: relative; min-height: 535px; background: linear-gradient(rgba(234,243,251,.12),rgba(233,241,248,.26)), url('/assets/doudizhu/background.png') center 48%/cover; isolation: isolate; }
.ddz-table::before { content: ''; position: absolute; inset: 118px 14% 54px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(229,238,253,.8); box-shadow: 0 0 0 9px rgba(255,255,255,.16); z-index: -1; }
.ddz-table-status { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; background: #fcfaffeb; padding: 9px 16px; border-radius: 32px; white-space: nowrap; font-size: 13px; max-width: 92%; }
#ddz-turn-label { overflow: hidden; text-overflow: ellipsis; }
#ddz-clock { font: 800 20px/1.4 ui-monospace,monospace; color: #8363ad; flex: none; }
#ddz-clock.urgent { color: #bc4563; }
.ddz-bottom { position: absolute; top: 73px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.ddz-multiplier { position: absolute; top: 149px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #546882; padding: 5px 12px; background: #ffffffcb; border-radius: 15px; white-space: nowrap; }
.ddz-player { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 125px; z-index: 1; }
.opponent-left { left: 24px; top: 90px; }.opponent-right { right: 24px; top: 90px; }.ddz-player.self { left: 24px; bottom: 20px; flex-direction: row; width: 215px; }
.ddz-portrait { position: relative; width: 105px; height: 133px; border: 3px solid #fff; border-radius: 18px; box-shadow: 0 4px 14px #334a7829; background: #fff; }
.ddz-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; border-radius: 14px; }
.ddz-portrait img[src*="character-2"] { object-fit: contain; }
.current .ddz-portrait { border-color: #bd89db; box-shadow: 0 0 0 4px #edd6ff96; }
.ddz-role { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); padding: 3px 10px; background: #b9704f; color: #fff; border-radius: 20px; font-size: 11px; white-space: nowrap; }.ddz-role.farmer { background: #6b89a6; }
.ddz-player-info { text-align: center; background: #ffffffec; border-radius: 12px; padding: 8px 12px; max-width: 140px; }
.ddz-player-info b { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 115px; }
.ddz-player-info span { display: block; color: #845eaa; font-size: 12px; margin: 4px 0; }.ddz-player-info small { display: block; font-size: 10px; color: #728195; }
.self .ddz-portrait { width: 65px; height: 79px; flex: none; }.self .ddz-player-info { text-align: left; }
.ddz-seat-placeholder { display: grid; place-items: center; height: 110px; width: 100px; border: 2px dashed #ffffffdb; border-radius: 18px; background: #f6f4ffbd; color: #7f7197; font-size: 14px; }.ddz-player.empty small { color: #fff; background: #56627d99; border-radius: 10px; padding: 4px 8px; }
.ddz-trick { position: absolute; inset: 203px 150px 132px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.ddz-trick-owner { font-size: 12px; padding: 4px 12px; border-radius: 10px; background: #ffffffdc; }
.ddz-played-cards { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px; max-width: 100%; }
.ddz-table-mark { text-align: center; color: #6c80a3; opacity: .8; display: grid; justify-items: center; gap: 7px; }.ddz-table-mark svg { width: 32px; height: 32px; }.ddz-table-mark b { font: 800 25px/1.5 var(--font-display); }.ddz-table-mark span { font-size: 11px; letter-spacing: .15em; }
.ddz-card { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; flex: none; width: 48px; height: 69px; padding: 5px; background: #fffefb; color: #33465a; border: 1px solid #cdd5df; border-radius: 7px; box-shadow: 0 2px 3px #263b5026; line-height: 1; }
.ddz-card b { font: 800 18px/1.2 ui-monospace,monospace; }.ddz-card svg { width: 14px; height: 14px; margin-top: 3px; fill: currentColor; stroke-width: 1; }.ddz-card.red { color: #c85172; }.ddz-card.joker b { font: 800 12px/1.2 var(--font-sans); }.ddz-card small { writing-mode: vertical-rl; font-size: 9px; letter-spacing: 1px; margin-top: 4px; }
.ddz-card.back { align-items: center; justify-content: center; background: repeating-linear-gradient(45deg,#d8caeb,#d8caeb 3px,#e4daf2 3px,#e4daf2 6px); color: #8868a8; border: 3px solid #fff; font-size: 23px; }
.ddz-hand-area { padding: 20px 24px 16px; background: #faf8ff; border-top: 1px solid #fff; }
.ddz-hand-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #7f748f; font-size: 12px; margin-bottom: 6px; }
.ddz-hand-head b { color: #5a4a76; font-size: 13px; }
.ddz-hand-scroll { overflow-x: auto; padding: 22px 3px 12px; scrollbar-width: thin; }
.ddz-hand { display: flex; justify-content: center; min-width: max-content; padding-right: 28px; min-height: 109px; }
.ddz-hand .ddz-card { width: 64px; height: 96px; margin-right: -28px; border-radius: 9px; cursor: pointer; transition: transform .13s,border-color .13s; }
.ddz-hand .ddz-card b { font-size: 22px; }.ddz-hand .ddz-card svg { width: 18px; height: 18px; }.ddz-hand .ddz-card.joker b { font-size: 15px; }
.ddz-hand .ddz-card.selected { transform: translateY(-16px); border: 2px solid #ab76c8; background: #fbf6ff; }
.ddz-controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 42px; }.ddz-controls > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ddz-result { position: absolute; top: 190px; left: 50%; transform: translateX(-50%); padding: 22px; width: min(420px,70%); background: #fffcf6f5; border: 1px solid #e4c6ed; border-radius: 18px; text-align: center; z-index: 3; box-shadow: 0 6px 20px #5745681c; }
.ddz-result h3 { font: 800 25px/1.4 var(--font-display); color: #a0679b; }.ddz-result p { font-size: 13px; color: #7e6c84; line-height: 1.8; margin-top: 8px; }
.ddz-history { position: absolute; bottom: 19px; right: 24px; max-width: 260px; padding: 10px 14px; list-style: none; font-size: 11px; line-height: 1.9; color: #5b6d88; background: #ffffffe3; border-radius: 12px; }
.ddz-message { margin-top: 14px; background: rgb(var(--srgb)/.94); color: var(--txt-soft); border-radius: 12px; padding: 12px 18px; font-size: 13px; line-height: 1.7; }.ddz-message.error { color: #b34568; }
.ddz-footnote { margin-top: 12px; font-size: 12px; line-height: 1.8; color: var(--txt-mute); }
.ddz-leave-confirm { padding: 14px 20px; background: #fff2ec; color: #905f63; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; }
@media (max-width:1050px) {.game-catalog{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:700px) {
  .game-catalog{grid-template-columns:repeat(2,minmax(0,1fr));}.game-choice:last-child{grid-column:1/-1;}
  .ddz-lobby-grid{grid-template-columns:1fr;}.ddz-intro{padding:22px;gap:10px;}.ddz-intro h2{font-size:28px;}.ddz-lobby-card{padding:20px;}
  .ddz-table{min-height:515px;background-position:center 48%;}.ddz-table::before{inset:156px 6% 96px;}
  .ddz-player{width:85px;gap:7px;}.opponent-left{left:10px;top:78px;}.opponent-right{right:10px;top:78px;}
  .ddz-portrait{width:68px;height:88px;border-radius:13px;}.ddz-portrait img{border-radius:10px;}.ddz-player-info{padding:6px 8px;max-width:90px;}.ddz-player-info b{max-width:75px;font-size:11px;}
  .ddz-bottom{top:80px;gap:3px;}.ddz-bottom .ddz-card{width:31px;height:48px;padding:3px;}.ddz-bottom .ddz-card b{font-size:13px;}.ddz-bottom .ddz-card svg{width:11px;height:11px;}.ddz-bottom .ddz-card.joker b{font-size:9px;}.ddz-bottom .ddz-card small{font-size:6px;}
  .ddz-multiplier{top:137px;padding:4px 7px;font-size:10px;}.ddz-trick{inset:245px 14px 124px;}.ddz-trick .ddz-card{width:32px;height:47px;padding:3px;}.ddz-trick .ddz-card b{font-size:12px;}.ddz-trick .ddz-card svg{width:10px;height:10px;}.ddz-trick .ddz-card small{font-size:6px;}
  .ddz-player.self{left:12px;bottom:18px;width:180px;}.self .ddz-portrait{width:52px;height:67px;}
  .ddz-history{right:12px;bottom:16px;max-width:135px;max-height:74px;overflow:hidden;font-size:10px;padding:7px;}.ddz-history li:not(:last-child):not(:nth-last-child(2)){display:none;}
  .ddz-hand-area{padding:16px 12px;}.ddz-hand-head{flex-wrap:wrap;}.ddz-hand .ddz-card{width:53px;height:82px;margin-right:-22px;}.ddz-hand{padding-right:22px;min-height:92px;justify-content:flex-start;}
  .ddz-hand .ddz-card b{font-size:19px;}.ddz-hand .ddz-card svg{width:16px;height:16px;}.ddz-controls .btn{padding:10px 15px;font-size:13px;}
  .ddz-room-top{padding:12px;flex-wrap:wrap;}.ddz-room-top strong{font-size:18px;}.ddz-result{top:254px;width:85%;padding:16px;}.ddz-result h3{font-size:22px;}
  .ddz-table-status{font-size:11px;padding:9px 12px;gap:7px;}.ddz-table-mark b{font-size:22px;}.ddz-connection{font-size:11px;padding:7px 9px;}
}
@media (max-width:370px) {.ddz-intro{flex-direction:column;align-items:flex-start;}.ddz-history{max-width:100px;}.ddz-player.self{width:170px;}.ddz-characters{gap:5px;}}
@media (prefers-reduced-motion:reduce){.ddz-hand .ddz-card{transition:none;}}