body {
background:#101c2b;color:#e7edf2
}
.game-header {
max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 30px;border-bottom:1px solid #ffffff1c
}
.game-header img {
width:200px;background:white;padding:8px 12px;border-radius:5px
}
.back-link {
font-size:14px;text-underline-offset:5px
}
.game-wrap {
max-width:1180px;margin:auto;padding:34px 30px
}
.game-title {
display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px
}
.game-title h1 {
font-size:48px;margin:12px 0
}
.game-title h1 span {
font-weight:400
}
.eyebrow {
color:#efabb7
}
.game-title p {
color:#b7c6d2
}
.tool,select {
font:inherit;border:1px solid #526378;border-radius:6px;padding:11px 15px;background:#1a2b3f;color:white;cursor:pointer;min-height:44px
}
.setup {
padding:56px 24px;text-align:center;background:#183d50;border:1px solid #3c6275;border-radius:12px
}
.setup h2 {
font-size:36px
}
.setup p {
max-width:560px;margin:0 auto 26px;color:#d1dfe6
}
.setup label {
display:block;font-size:13px;margin:16px 0 10px
}
.setup-controls {
display:flex;gap:12px;justify-content:center;flex-wrap:wrap
}
.seats {
display:flex;gap:12px;margin-bottom:18px
}
.seat {
flex:1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#1b2b3f;border:2px solid transparent;padding:14px 18px;border-radius:8px
}
.seat span {
color:#b9c8d4;font-size:14px
}
.seat.active {
border-color:#edb747;background:#263a4c
}
.board {
background:#173d50;border:1px solid #456777;border-radius:12px;padding:20px 24px;display:grid;gap:12px
}
.suit-row {
display:grid;grid-template-columns:36px 1fr 90px 1fr;align-items:center;gap:16px;border-bottom:1px solid #ffffff18;padding-bottom:12px
}
.suit-row:last-child {
border:0;padding:0
}
.suit-label {
font-size:32px
}
.red {
color:#bd1531
}
.suit-label {
color:#fff
}
.suit-row.red .suit-label {
color:#ffb0bd
}
.pile {
display:flex;justify-content:center;align-items:center;gap:14px;position:relative;min-height:100px;padding-top:18px
}
.pile small {
position:absolute;top:0;font-size:9px;letter-spacing:.1em;color:#b8cbd5
}
.pile.seven {
padding-top:0
}
.empty {
width:68px;height:82px;border:1px dashed #8aabbc;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#bbced9;font-size:13px
}
.closed {
color:#c6e1cf;font-size:11px
}
.playing-card {
width:64px;height:82px;flex-shrink:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:#fffdf8;color:#1a293a;border:2px solid #e0e4e7;border-radius:7px;font:22px/1.1 Arial,sans-serif;box-shadow:0 3px 6px #0003;padding:7px
}
.playing-card span {
font-size:28px;margin-top:4px
}
.playing-card.red {
color:#bd1531
}
.turn-panel {
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0;min-height:82px
}
.turn-panel p {
font-weight:bold;color:#f2d48c
}
.hand-zone {
border-top:1px solid #ffffff26;padding-top:20px
}
.hand-zone h2 {
font-size:13px;letter-spacing:.08em;margin:0 0 10px
}
.hand-hint {
font-size:12px;color:#a9bccb;margin-bottom:18px
}
.hand {
display:flex;gap:10px;flex-wrap:wrap;padding:6px 2px 22px
}
.hand button {
cursor:pointer;transition:transform .15s
}
.hand button:disabled {
opacity:.65;cursor:default
}
.hand button.legal {
border-color:#efbd55;box-shadow:0 0 0 2px #efbd5540
}
.hand button.legal:hover {
transform:translateY(-6px)
}
.rules,.events {
border-top:1px solid #ffffff26;margin-top:24px
}
.rules summary,.events summary {
cursor:pointer;padding:18px 0;font-weight:bold
}
.rules>div {
max-width:850px;color:#c0cfdb;font-size:14px
}
.events>div {
max-height:300px;overflow:auto;color:#b3c7d5;font-size:13px
}
.events p {
margin:0 0 8px
}
.game-footer {
margin-top:40px;font-size:11px;letter-spacing:.1em;color:#8fa6b9
}
[hidden] {
display:none!important
}
@media(max-width:650px) {
.game-header {
padding:16px 18px
}
.game-header img {
width:150px
}
.game-wrap {
padding:24px 16px
}
.game-title {
align-items:flex-start
}
.game-title h1 {
font-size:36px
}
.game-title p {
font-size:14px
}
.game-title .eyebrow {
font-size:9px
}
.tool {
padding:8px;font-size:12px;white-space:nowrap
}
.seats {
gap:6px;flex-wrap:wrap
}
.seat {
flex:1 1 40%;padding:9px 12px
}
.board {
padding:16px 10px
}
.suit-row {
gap:5px
}
.suit-label {
font-size:24px
}
.pile {
gap:4px;flex-direction:column;padding-top:20px;min-height:110px
}
.pile small {
letter-spacing:0
}
.pile .playing-card,.empty {
width:48px;height:66px;font-size:18px
}
.pile .playing-card span {
font-size:23px
}
.closed {
font-size:9px
}
.hand {
gap:7px
}
.hand .playing-card {
width:53px;height:74px;font-size:19px
}
.setup {
padding:34px 18px
}
.setup h2 {
font-size:28px
}

}
@media(prefers-reduced-motion:reduce) {
.hand button {
transition:none
}

}
@media(max-width:650px) {
.game-header {
flex-wrap:wrap;gap:10px
}
.back-link {
display:inline-flex;align-items:center;min-height:44px;font-size:14px
}
.game-title {
flex-wrap:wrap
}
.game-title .tool {
white-space:normal;min-height:44px
}
.setup-controls .button {
width:100%;gap:8px;padding:14px 10px
}
.suit-row {
grid-template-columns:20px minmax(0,1fr) 48px minmax(0,1fr)
}
.pile small {
font-size:9px;white-space:nowrap
}
.seat {
min-width:0
}
.hand-hint {
font-size:14px
}
.rules>div {
font-size:15px
}

}

/* Mobile usability review 2026-10-31 */