/* General Reset & Body */
body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    box-sizing: border-box;
    overflow: hidden; /* Prevent scroll bouncing */
}

/* Main Layout: Default to Portrait/Desktop */
.main-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 0;
}

#game-wrapper {
    width: 100%;
    flex-grow: 1; /* Take up available space */
    background-color: green;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    overflow-y: auto; /* Allow vertical scrolling */
}

#game-board {
    user-select: none;
    -webkit-user-select: none;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}

#controls {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f0f0f0;
}

/* #controls h1 has been removed */

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    box-sizing: border-box;
}

/* .title-icon styles removed */

/* Control panel icon buttons */
#home-button,
#tutorial-button,
#restart-game-button,
#undo-button,
#undo-king-button,
#redo-button,
#get-tip-button,
#history-button,
#replay-exit {
    padding: 10px;
    border-radius: 5px;
    border: none;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

#home-button img,
#tutorial-button img,
#restart-game-button img,
#undo-button img,
#undo-king-button img,
#redo-button img,
#get-tip-button img,
#history-button img,
#replay-exit img {
    width: 90%;
    height: 90%;
}

#undo-button:disabled,
#undo-king-button:disabled,
#redo-button:disabled { cursor: default; }
#undo-button:disabled img,
#undo-king-button:disabled img,
#redo-button:disabled img { opacity: 0.3; }

/* Modal text buttons */
#restart-button,
#win-restart-button,
#win-cancel-button,
#confirm-yes-button,
#confirm-no-button,
#continue-game-button {
    padding: 12px 20px;
    border-radius: 5px;
    border: none;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s;
    font-size: 16px;
}

/* Columns & Cards: Fluid and Responsive */
.column {
    position: relative;
    flex: 1;
    margin: 0 0.5%;
    cursor: pointer;
    /* Height will be set by JS */
}

.card {
    position: absolute;
    width: 90%; /* Relative to column width */
    left: 5%;
    /* Aspect Ratio with padding-top trick */
    height: 0;
    padding-bottom: 140%; /* 1.4 aspect ratio (height/width) */
    
    border-radius: 5%; /* Relative border radius */
    box-shadow: 0 0.5vw 1vw rgba(0,0,0,0.2);
    font-weight: bold;
    background-color: white;
    cursor: pointer;
    transition: box-shadow 0.2s, outline 0.2s;
    font-size: calc(2.5vw * var(--card-scale, 1)); /* Responsive font size */
    box-sizing: border-box;
}

/* Card Content Scaling */
.card.red { color: #ff0000; }
.card.black { color: #000000; }

.corner {
    position: absolute;
    width: 25%;
    line-height: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.corner .rank { font-size: 1em; }
.corner .suit { font-size: 0.7em; margin-top: 5%; }
.top-left { top: 5%; left: 5%; }
.bottom-right { bottom: 5%; right: 5%; transform: rotate(180deg); }
.pips-container, .face-card-art {
    position: absolute;
    top: 18%; bottom: 18%; left: 15%; right: 15%;
    box-sizing: border-box;
}
.pip { position: absolute; font-size: 1.8em; transform: translate(-50%, -50%); }
.face-card-art svg { width: 100%; height: 100%; fill: currentColor; }

.card.back {
    padding-bottom: 140%; /* Maintain aspect ratio */
    background-color: #2a52be;
    background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.2) 1.5vw, transparent 1.5vw, transparent 3vw);
}
.card.back > * { display: none; } /* Hide content when face down */
/* 被压住的牌只显示左上角的点数与花色，避免花点碎片露出 */
.card.covered .pips-container, .card.covered .bottom-right { visibility: hidden; }

.card.selected { outline: 0.6vw solid #0099ff; z-index: 100; }
.card.selected.no-move { outline-color: #ff4136; }

/* Landscape Mode */
@media (orientation: landscape) {
    .main-container {
        flex-direction: row;
        /* No margin or padding, allow game to be flush left */
    }
    #game-wrapper {
        height: 100%;
        /* No margin */
    }
    #controls {
        width: 90px; /* 60px button + 10px L + 20px R padding */
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px 0 10px; /* Asymmetrical padding to balance gap */
        box-sizing: border-box;
    }
    .button-group {
        flex-direction: column;
        width: 100%;
        gap: 20px; /* Add space between buttons vertically */
        align-items: center; /* Center buttons in the flex column */
    }
    .card {
        font-size: calc(1.5vw * var(--card-scale, 1));
    }
}

/* Modal styles remain mostly the same, with minor responsive tweaks */
#game-over-modal, #win-modal, #confirm-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6); display: flex;
    justify-content: center; align-items: center; z-index: 200;
}
#game-over-modal.hidden, #win-modal.hidden, #confirm-modal.hidden { display: none; }
.modal-content {
    background: white; padding: 20px 30px; border-radius: 10px;
    text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal-buttons { display: flex; gap: 15px; margin-top: 25px; justify-content: center; }
.modal-buttons button { width: auto; min-width: 120px; }
.hidden { display: none; }

/* Hint Styles */
.card.hint-source, .column.hint-source { outline: 0.6vw solid #00ff00; box-shadow: 0 0 1.5vw 0.4vw rgba(0,255,0,0.8); z-index: 90; animation: pulse 0.8s infinite alternate; }
.card.hint-destination { outline: 0.6vw solid #ffae42; box-shadow: 0 0 1.5vw 0.4vw rgba(255,174,66,0.9); z-index: 90; }
.column.hint-destination { outline: 0.6vw dashed #ffae42; outline-offset: -0.3vw; min-height: 0; box-shadow: inset 0 0 2vw rgba(255,174,66,0.5); }
@keyframes pulse {
    from { outline-color: #00ff00; }
    to { outline-color: #b6ffb6; }
}
#game-wrapper { position: relative; }
/* 吸附在可见区顶部的列尾牌 */
.card.sticky-tail { z-index: 80; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); }
#hint-path { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 150; }
#apply-hint-button {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 160;
    padding: 24px 56px;
    border: 4px solid white;
    border-radius: 24px;
    background: #ffae42;
    color: #212529;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
#apply-hint-button:hover { background: #ff9a10; }

/* Button Colors */

/* Control buttons in the main view are transparent */
#home-button,
#tutorial-button,
#restart-game-button,
#undo-button,
#undo-king-button,
#redo-button,
#get-tip-button,
#history-button,
#replay-exit {
    background-color: transparent;
}

/* Modal buttons retain their styles */
#restart-button, #win-restart-button, #win-cancel-button, #confirm-yes-button, #confirm-no-button { background-color: #2a52be; }
#restart-button:hover, #win-restart-button:hover, #win-cancel-button:hover, #confirm-yes-button:hover, #confirm-no-button:hover { background-color: #224299; }

#continue-game-button { background-color: #ffc107; color: #212529; }
#continue-game-button:hover { background-color: #e0a800; }

#confirm-no-button { background-color: #ffc107; color: #212529; }
#confirm-no-button:hover { background-color: #e0a800; }

#win-cancel-button { background-color: #ffc107; color: #212529; }
#win-cancel-button:hover { background-color: #e0a800; }


#controls { flex-shrink: 0; }
#game-wrapper { min-height: 0; min-width: 0; }
@media (orientation: landscape) {
    .button-group { gap: clamp(2px, 2vh, 20px); }
    .button-group > button, .button-group > a { height: min(60px, calc((100dvh - 28px) / 8 - 2vh)); flex-shrink: 0; }
}

.card.replay-active .top-left { background: #b6ffb6; border-radius: 4px; outline: 2px solid #00b000; }

#history-dialog {
    width: min(1230px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #dce5df;
    border-radius: 24px;
    background: #fafbf8;
    color: #243d32;
    box-shadow: 0 24px 80px rgba(0, 24, 12, 0.35);
    overflow-y: auto;
}
#history-dialog::backdrop { background: rgba(5, 22, 15, 0.65); backdrop-filter: blur(5px); }
.history-heading {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    position: sticky; top: 0; z-index: 2;
    padding: 16px 24px; border-bottom: 1px solid #0e3024;
    background: linear-gradient(120deg, #123e2e, #23654c);
    color: #fff;
}
.history-heading h2 { margin: 0; font-size: 27px; letter-spacing: 1px; }
#history-close {
    width: 38px; height: 38px; padding: 0; border: 1px solid #ffffff40; border-radius: 50%;
    background: #ffffff12; color: white; font-size: 27px; line-height: 1; cursor: pointer;
}
#history-close:hover { background: #ffffff30; }
.history-content { padding: 24px 32px; }
.history-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.history-summary > div { padding: 18px 22px; border: 1px solid #dce5df; border-radius: 14px; background: white; }
.history-summary span { display: block; font-size: 16px; color: #6d8074; margin-bottom: 10px; }
.history-summary strong { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.history-summary small { margin-left: 10px; color: #6d8074; font-size: 15px; }
.history-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.history-list-heading h3 { margin: 0; font-size: 20px; }
.history-list-heading > span { color: #7b897f; font-size: 15px; }
#history-status { font-size: 14px; color: #ad413c; }
#history-status:empty { display: none; }
.history-table-wrap { overflow-x: auto; border-radius: 12px; }
#records-table { width: 100%; border-collapse: collapse; }
#records-table th { padding: 12px 14px; font-size: 15px; font-weight: normal; background: #edf2ed; color: #758579; text-align: left; white-space: nowrap; }
#records-table td { padding: 14px; border-bottom: 1px solid #e6ece6; font-size: 15px; color: #7b897f; white-space: nowrap; }
#records-table tbody tr { background: white; }
#records-table tbody tr:hover { background: #f1f6f1; }
#records-table .history-top-1 { background: #fffaf0; }
.history-rank { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 16px; color: #829087; font-variant-numeric: tabular-nums; }
.history-top-1 .history-rank { background: #f4e4b9; color: #896b28; border-radius: 50%; font-weight: bold; }
.history-top-2 .history-rank { background: #e7edf1; color: #657783; border-radius: 50%; font-weight: bold; }
.history-top-3 .history-rank { background: #f2e4da; color: #986b4b; border-radius: 50%; font-weight: bold; }
.history-moves { font-size: 28px; color: #254b38; font-variant-numeric: tabular-nums; }
#records-table .history-date { color: #475e50; font-size: 16px; }
.history-replay { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid #d5e2d8; border-radius: 9px; background: #f4f8f3; color: #326046; font-size: 16px; font-weight: bold; text-decoration: none; }
.history-replay::before { content: '▶'; font-size: 9px; }
.history-replay:hover { background: #21563d; color: white; border-color: #21563d; }
#history-dialog :is(button, a):focus-visible { outline: 3px solid #cfad60; outline-offset: 3px; }
.history-footer { padding: 16px 32px; background: #eff3ed; border-top: 1px solid #e0e8de; }
.history-footer p { font-size: 14px; line-height: 1.7; color: #758579; margin: 0; }
#records-table .history-empty-cell { height: 160px; text-align: center; white-space: normal; }
.history-empty-cell strong { display: block; color: #526859; font-size: 16px; margin-bottom: 10px; }
.history-empty-cell span { font-size: 16px; line-height: 1.7; }
@media (max-width: 520px) {
    #history-dialog { border-radius: 18px; }
    .history-heading { padding: 14px 20px; }
    .history-content { padding: 20px 16px; }
    .history-heading h2 { font-size: 20px; }
    .history-summary > div { padding: 16px; }
    .history-summary strong { font-size: 28px; }
    .history-summary small { margin-left: 5px; }
    #records-table th, #records-table td { padding: 12px 8px; }
    .history-replay { padding: 9px 10px; }
    .history-footer { padding: 16px 20px; }
}
.history-replay { cursor: pointer; font-family: inherit; }

/* 回放保留游戏工具栏的图标与顺序，暖色背景标识只读模式。 */
#controls.replay-controls-panel { background: #f3e6c7; gap: 10px; }
.replay-mode-label { color: #76561d; font-size: 12px; font-weight: bold; text-align: center; padding: 6px 0; }
#replay-status { margin: 0; font-size: 11px; line-height: 1.5; color: #76561d; text-align: center; overflow-wrap: anywhere; }
.replay-controls-panel .button-group button:disabled img,
.replay-controls-panel [aria-disabled="true"] img { opacity: 0.25; }
.replay-controls-panel .button-group button:disabled,
.replay-controls-panel [aria-disabled="true"] { cursor: default; }
@media (orientation: landscape) {
    #controls.replay-controls-panel { padding-top: 10px; padding-bottom: 10px; }
    .replay-controls-panel .button-group { gap: 1vh; flex-wrap: nowrap; }
    .replay-controls-panel .button-group > button,
    .replay-controls-panel .button-group > a { height: min(60px, calc((100dvh - 130px) / 9 - 1vh)); }
}

.history-duration { color: #254b38 !important; font-size: 21px !important; font-weight: bold; font-variant-numeric: tabular-nums; }
#history-best { font-size: clamp(16px, 2.8vw, 29px); }

#undo-count { margin: 8px 0 0; color: #68736b; font-size: 11px; line-height: 1.5; text-align: center; }

/* 表头固定，记录区最多容纳十行；小屏幕按弹窗剩余空间进一步收缩。 */
#history-dialog[open] { display: flex; flex-direction: column; }
.history-heading, .history-footer { flex-shrink: 0; }
.history-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.history-summary, .history-list-heading, #history-status { flex-shrink: 0; }
.history-table-wrap { min-height: 0; overflow-y: auto; }
#records-table th { position: sticky; top: 0; z-index: 1; }

.history-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.history-retry { margin-left: 8px; }
.history-retry::before { content: '↻'; font-size: 16px; }
.history-game-label { display: block; margin-top: 6px; font-size: 12px; color: #758579; font-weight: normal; }