/* A soft, bright card lounge. Layout and card rules come from the shared game. */
:root {
    color-scheme: light;
    color: #57444e;
    background: #fff8f5;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
}
.game-nav-header {
    --game-header-side-bg: #fff8f5;
    --game-header-center-bg: #fff8f5;
    --game-header-accent: #9d526b;
}
.game-shell { background: #fff8f5; }
button:focus-visible { outline-color: #92516d; }
.table {
    border: 1px solid #d9bac4;
    border-radius: 22px;
    background: #fffaf7;
    box-shadow: inset 0 0 0 3px #ffffff80, 0 3px 0 #e9d8da, 0 9px 24px #7750640d;
}
.arena {
    color: #57444e;
    background:
        radial-gradient(ellipse at 50% 0, #fffdf9, transparent 70%),
        radial-gradient(ellipse at 50% 65%, #faedf0, #f2e5ec);
    border-bottom: 1px solid #ddc5ce;
    border-image: none;
}
.arena::before { border-color: #d9b9c659; box-shadow: none; }
.portrait {
    width: 76px; height: 76px;
    background: #f3e7e6;
    border: 3px solid #fffaf7;
    box-shadow: 0 0 0 1px #d2b3c0, 0 4px 10px #78515e12;
}
.portrait img { display: block; object-fit: cover; filter: none; }
.opponent.is-turn .portrait {
    border-color: #fffaf7;
    box-shadow: 0 0 0 2px #a75f7b, 0 0 0 5px #b8799120, 0 4px 12px #78515e18;
}
.opponent.is-turn .portrait::before { background: #a75f7b; }
.opponent.is-finished .portrait { border-color: #fffaf7; box-shadow: 0 0 0 2px #b68e55, 0 4px 10px #78515e12; }
.opponent-name { color: #624651; text-shadow: none; font-weight: 650; }
.remaining {
    background: #fffaf7; color: #87506a; border-color: #cda4b6;
    box-shadow: 0 2px 4px #78515e12;
}
.is-finished .remaining { background: #f8ecd4; color: #795b30; border-color: #c5aa7c; }
.bubble { color: #785264; text-shadow: none; }
.pass-marker { background: #f7f0f3; color: #75636e; border-color: #d1bbc6; }
.table-center::before { border-color: #d1b3c44d; background: #ffffff30; box-shadow: 0 0 0 6px #ffffff20; }
#status { background: #fffaf7b3; color: #796370; border-color: #dbc5cf; }
.is-player-turn #status { color: #80435d; background: #fffaf7; border-color: #bd8b9e; box-shadow: 0 2px 9px #a2677f0d; }
.table-mark { color: #b58c9e80; text-shadow: none; }
.event { color: #87506a; }
.event:not(:empty) { text-shadow: none; }
.revolution { color: #694678; background: #f2e5f9; border-color: #b69ac6; box-shadow: 0 2px 10px #9671ad20; }
.is-revolution .arena { background: radial-gradient(ellipse at 50% 35%, #f8f0fd, #e9dced); }
.card {
    color: #514b65; background: linear-gradient(145deg, #fffefa, #fcf4ec);
    border-color: #d8c4cd; box-shadow: 0 2px 0 #d3bfc7, 0 4px 7px #78515e16;
}
.card.red { color: #aa4866; }
.pile .card { box-shadow: 0 2px 0 #d3bfc7, 0 5px 10px #78515e20; }
.player-area { background: linear-gradient(#fffaf7, #fcf4f2); box-shadow: inset 0 1px #fff; }
.player-label { color: #7b6471; }
#you::before { background: #b7a3ad; }
#you.is-turn { color: #914661; }
#you.is-turn::before { background: #a45b77; box-shadow: 0 0 0 3px #a45b771a; }
#hand-count { background: #f4e9ee; color: #80516a; border-color: #ddc6d0; }
.icon-button { background: #fffaf7; color: #87516c; border-color: #ddc6d0; }
.hand .card.playable { border-color: #bf96a8; box-shadow: 0 2px 0 #c6a9b6; }
.hand .card:disabled { background: #eee7e9; color: #7c7384; border-color: #d5c9d0; box-shadow: 0 2px 0 #cec2c8; }
.hand .card.red:disabled { color: #976b7c; }
.hand .card.selected {
    color: #514b65; background: linear-gradient(145deg, #fffafa, #f8dce6);
    border-color: #a05a76; box-shadow: 0 0 0 2px #a05a76, 0 5px 12px #96516d26;
}
.hand .card.red.selected { color: #aa4866; }
.controls button { color: #78516a; background: #f6eaf0; border-color: #d5b8c6; box-shadow: 0 2px 0 #dec6d0; }
button.primary {
    color: #fffafc; background: linear-gradient(115deg, #9d526c, #aa627e);
    border-color: #99536d; box-shadow: 0 3px 0 #7d4057, inset 0 1px #ffffff20;
    text-shadow: none;
}
.controls button:disabled, .controls button.primary:disabled { color: #87727e; background: #e9dfe4; border-color: #d9cad2; }
.table.is-idle .hand::before {
    color: #9b627b; border-color: #bb96a7;
    background: repeating-linear-gradient(45deg, #f2e3ea 0 2px, #f9eff3 2px 4px);
    box-shadow: 14px 2px 0 -1px #d4bac7, 28px 5px 0 -2px #e8d8df;
}
dialog { color: #604b57; background: radial-gradient(ellipse at 50% 0, #fffaf7, #f9edf1); border-color: #cfacbc; box-shadow: 0 20px 70px #4c354c33; }
dialog::backdrop { background: #47354866; }
dialog h2 { color: #92516b; }
dialog .rule-note { color: #816c78; }
.result-crown { color: #b18a50; border-color: #dac4a2; background: #fbf1df; }
#result.is-victory { background: radial-gradient(ellipse at 50% 0, #fff1d7, transparent 65%), #fff8f5; }
#result.is-victory .result-crown { color: #9b702f; border-color: #c7a162; background: #fff0d2; box-shadow: 0 0 0 5px #d6b16b12, 0 0 26px #d6b16b26; text-shadow: none; }
#ranking li { border-bottom-color: #ddc7d14d; }
#ranking li.is-you { background: #f4e3eb; border-color: #cfa2b6; }
#ranking li > span:first-child { color: #997044; }
#ranking img { object-fit: cover; border-radius: 50%; }
#ranking strong { color: #8e596f; }
.result-player small { color: #7c6372; }
@media (hover: hover) {
    .hand .card.playable:hover { border-color: #a05a76; }
    .hand .card.selected:hover { border-color: #a05a76; }
    .icon-button:hover { background: #f5e7ed; }
}
@media (max-width: 359px) { .portrait { width: 64px; height: 64px; } }
@media (max-height: 740px) { .portrait { width: 58px; height: 58px; } }

.remaining.is-near { color: #80435d; background: #f8dce6; border-color: #a05a76; box-shadow: 0 0 0 2px #fffaf7; }