* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: #050a0e;
}

body {
    overflow-x: hidden;
    font-family: Arial, "Noto Sans KR", sans-serif;
    color: #fff;
}

button {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

#game {
    width: min(100vw, 1080px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 19.2px 35.2px 32px;

    background:
        linear-gradient(rgba(3, 12, 18, .08), rgba(3, 12, 18, .08)),
        var(--game-bg, url("images/background.png")) center top / cover no-repeat;

    position: relative;
    overflow: hidden;
}

#topBar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    min-height: 137.6px;
}

.titleBlock h1 {
    margin: 6.4px 0 0;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36.8px, 4.2vw, 51.2px);
    letter-spacing: 1.92px;
    color: #ffe7a0;
    text-shadow: 0 3.2px 6.4px #000;
}

.scoreBlock {
    padding-top: 44.8px;
    min-width: 216px;
    text-align: left;
    font-weight: 800;
    line-height: 1.35;
    text-shadow: 0 3.2px 6.4px #000;
}

#roundInfo {
    font-size: 27.2px;
}

#totalScore {
    margin-top: 3.2px;
    font-size: 32px;
    color: #f4e7c4;
}

.opponentSummary,
.mySummary {
    display: flex;
    justify-content: center;
    align-items: center;
}

.opponentSummary {
    height: 124.8px;
    margin-top: -12.8px;
}

.mySummary {
    height: 115.2px;
    margin-top: 6.4px;
}

.playerEmblem {
    width: 118.4px;
    height: 118.4px;
    object-fit: contain;
    filter: drop-shadow(0 6.4px 11.2px rgba(0, 0, 0, .7));
}

.collectionGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 16px;
    row-gap: 12.8px;
    align-items: start;
}

.opponentGrid {
    margin-top: 6.4px;
}

.myGrid {
    margin-top: 38.4px;
}

.collectionCell {
    min-width: 0;
    text-align: center;
}

.collectionLabel {
    margin-bottom: 6.4px;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 800;
    color: #f2eee5;
    text-shadow: 0 3.2px 4.8px #000;
    white-space: nowrap;
}

.curseLabel {
    color: #eac1ef;
}

.curseCell {
    grid-column: 1 / 2;
    margin-top: 16px;
}

.collectionIcons {
    min-height: 76.8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.collectionIcons .iconWrap {
    width: 60.8px;
    height: 60.8px;
    margin-left: -14.4px;
    position: relative;
    flex: 0 0 auto;
}

.collectionIcons .iconWrap:first-child {
    margin-left: 0;
}

.collectionIcons .iconWrap > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3.2px 4.8px rgba(0,0,0,.75));
}

.collectionIcons .setMark {
    position: absolute;
    width: 17.6px;
    height: 17.6px;
    top: 1.6px;
    object-fit: contain;
    z-index: 3;
    filter: drop-shadow(0 1.6px 3.2px rgba(0,0,0,.9));
    pointer-events: none;
}

/* 금화/보석 세트 카드: 아이콘 안쪽 좌 / 중 / 우 */
.collectionIcons .setMarkPos1 {
    left: 1.6px;
}
.collectionIcons .setMarkPos2 {
    left: 50%;
    transform: translateX(-50%);
}
.collectionIcons .setMarkPos3 {
    right: 1.6px;
}

.collectionIcons .countBubble {
    position: absolute;
    right: -8px;
    bottom: -9.6px;
    min-width: 30.4px;
    height: 30.4px;
    padding: 0 6.4px;
    border-radius: 16px;
    background: rgba(8, 13, 17, .92);
    border: 1.6px solid rgba(255, 221, 126, .8);
    color: #ffe69a;
    font-size: 19.2px;
    line-height: 27.2px;
    font-weight: 800;
}

.collectionIcons .curseValue {
    color: #f4bfd2;
    font-weight: 800;
    font-size: 20.8px;
    margin-left: 3.2px;
}

#tableArea {
    margin-top: 3.2px;
}

.tableHeader {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: end;
    min-height: 70.4px;
}

.tableTitle {
    text-align: center;
    font-size: 27.2px;
    font-weight: 800;
    color: #f3ede3;
    text-shadow: 0 3.2px 4.8px #000;
}

.tieInfo {
    text-align: right;
    padding-right: 6.4px;
    color: #ffe469;
    font-size: 22.4px;
    font-weight: 800;
    text-shadow: 0 3.2px 4.8px #000;
}

.tableRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 19.2px;
    align-items: start;
}

.deckStack {
    text-align: center;
    position: relative;
}

.deckStack > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6.4px 8px rgba(0,0,0,.6));
}

.treasureDeckStack {
    padding-top: 3.2px;
}

.deckCount {
    margin-top: 6.4px;
    font-size: 32px;
    font-weight: 800;
    color: #ffeaa7;
    text-shadow: 0 3.2px 4.8px #000;
}

.treasure {
    position: relative;
    width: 100%;
    aspect-ratio: 0.72;
    padding: 0;
    border: 0;
    border-radius: 14.4px;
    background: transparent;
    cursor: pointer;
    transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}

.treasure > img:not(.setBadge) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12.8px;
}

.slotNo {
    position: absolute;
    left: 11.2px;
    top: 9.6px;
    z-index: 4;
    width: 32px;
    height: 32px;
    border-radius: 6.4px;
    display: grid;
    place-items: center;
    background: rgba(14, 14, 14, .75);
    color: #fff4d2;
    font-size: 19.2px;
    font-weight: 800;
    pointer-events: none;
}

.treasure .setBadge {
    position: absolute;
    width: 44.8px;
    height: 44.8px;
    right: -4.8px;
    top: -4.8px;
    z-index: 3;
    object-fit: contain;
}

.treasure.selected {
    transform: translateY(-12.8px) scale(1.025);
    filter: drop-shadow(0 0 17.6px #ffe05b);
}

.treasure.myChoice {
    box-shadow: none;
}

.treasure.opponentChoice {
    box-shadow: none;
}

.treasure:disabled {
    cursor: default;
}

.treasure.captured {
    opacity: .22;
}

#handArea {
    margin-top: 0;
}

.handTitle {
    margin: 0 0 12.8px 19.2px;
    text-align: left;
    font-size: 28.8px;
    font-weight: 800;
    color: #f3eee2;
    text-shadow: 0 3.2px 4.8px #000;
}

.handRow {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 8px;
    align-items: start;
}

.exploreDeckStack > img {
    width: 100%;
    margin: 0 auto;
    display: block;
}

.exploreDeckStack .deckCount {
    margin-top: 1.6px;
}

#powers {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.power {
    width: 19%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}

.power img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 11.2px;
}

.power.selected {
    transform: translateY(-12.8px);
    filter: drop-shadow(0 0 16px #ffe05b);
}

.power:disabled {
    opacity: .45;
    cursor: default;
}

.actionArea {
    display: grid;
    grid-template-columns: minmax(384px, 1fr) 256px;
    gap: 28.8px;
    align-items: center;
    margin: 16px 28.8px 0 328px;
}

.imageButton {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.imageButton img {
    display: block;
    width: 100%;
    height: auto;
}

.imageButton:disabled {
    opacity: .35;
    cursor: default;
}

.imageButton:not(:disabled):active {
    transform: translateY(3.2px);
}

.secondaryButton {
    max-width: 272px;
}

.bottomBar {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28.8px;
    align-items: center;
    margin-top: 12.8px;
}

.exitButton {
    width: 240px;
    height: 83.2px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exitButton > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.exitButton:focus-visible {
    outline: 3.2px solid #ffe469;
    outline-offset: 3.2px;
    border-radius: 16px;
}

.selectionInfo {
    text-align: left;
    color: #f4eee3;
    font-size: 25.6px;
    font-weight: 700;
    text-shadow: 0 3.2px 4.8px #000;
}

.statusText,
.resultText {
    min-height: 35.2px;
    margin-top: 6.4px;
    text-align: center;
    font-size: 22.4px;
    color: #ffeaa1;
    text-shadow: 0 3.2px 4.8px #000;
}

.resultText {
    font-size: 25.6px;
    font-weight: 800;
}

.flyingCard {
    position: fixed;
    z-index: 9999;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 8px 12.8px rgba(0,0,0,.65));
}

@media (max-width: 1px) {
    #game {
        width: 100vw;
        padding: 14.4px 19.2px 25.6px;
    }

    #topBar {
        min-height: 118.4px;
    }

    .scoreBlock {
        min-width: 188.8px;
        padding-top: 36.8px;
    }

    #roundInfo {
        font-size: 22.4px;
    }

    #totalScore {
        font-size: 27.2px;
    }

    .opponentSummary {
        height: 105.6px;
    }

    .mySummary {
        height: 99.2px;
    }

    .playerEmblem {
        width: 99.2px;
        height: 99.2px;
    }

    .collectionGrid {
        column-gap: 8px;
    }

    .collectionLabel {
        font-size: 22.4px;
    }

    .collectionIcons {
        min-height: 64px;
    }

    .collectionIcons .iconWrap {
        width: 49.6px;
        height: 49.6px;
        margin-left: -12.8px;
    }

    .tableHeader {
        grid-template-columns: 1fr 2fr 1fr;
    }

    .tableRow {
        grid-template-columns: repeat(4, 1fr);
        gap: 9.6px;
    }

    .tableTitle {
        font-size: 24px;
    }

    .tieInfo {
        font-size: 19.2px;
    }

    .deckCount {
        font-size: 27.2px;
    }

    .handRow {
        grid-template-columns: 108.8px 1fr;
        gap: 9.6px;
    }

    .exploreDeckStack > img {
        width: 99.2px;
    }

    #powers {
        gap: 4.8px;
    }

    .actionArea {
        grid-template-columns: 1fr 188.8px;
        gap: 12.8px;
        margin: 12.8px 9.6px 0 121.6px;
    }

    .bottomBar {
        grid-template-columns: 211.2px 1fr;
        gap: 16px;
    }

    .exitButton {
        width: 211.2px;
        height: 70.4px;
    }

    .selectionInfo {
        font-size: 20.8px;
    }
}


/* ===== Player movement lanes ===== */

.playerHome {
    position: relative;
}

.playerHomeText {
    display: none;
    min-height: 118.4px;
    align-items: center;
    justify-content: center;
    color: rgba(235, 238, 240, .52);
    font-size: 25.6px;
    font-weight: 700;
    text-shadow: 0 3.2px 4.8px #000;
}

.playerHome.iconAway .playerEmblem {
    visibility: hidden;
}

.playerHome.iconAway .playerHomeText {
    display: flex;
}

.playerMoveLane {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 19.2px;
    align-items: center;
    height: 115.2px;
    pointer-events: none;
}

.opponentMoveLane {
    margin-top: 1.6px;
    margin-bottom: 4.8px;
}

.myMoveLane {
    margin-top: 4.8px;
    margin-bottom: 3.2px;
}

.moveTarget {
    height: 108.8px;
    position: relative;
}

.moveTarget::after {
    content: "";
    position: absolute;
    width: 102.4px;
    height: 102.4px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.6px solid rgba(255, 224, 123, .06);
    background: rgba(255, 255, 255, .015);
}

.movingPlayerEmblem {
    filter: drop-shadow(0 6.4px 12.8px rgba(0,0,0,.8));
}

@media (max-width: 1px) {
    .playerMoveLane {
        grid-template-columns: repeat(4, 1fr);
        gap: 9.6px;
        height: 96px;
    }

    .moveTarget {
        height: 89.6px;
    }

    .moveTarget::after {
        width: 83.2px;
        height: 83.2px;
    }

    .playerHomeText {
        min-height: 99.2px;
        font-size: 22.4px;
    }
}


/* 탐험력 공개 점수: 이동한 플레이어 아이콘 옆에 표시 */
.exploreScoreBadge {
    min-width: 54.4px;
    height: 60.8px;
    padding: 0 11.2px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;
    border: 3.2px solid rgba(255, 219, 92, .92);
    background: rgba(7, 16, 21, .93);

    color: #ffe46f;
    font-size: 44.8px;
    line-height: 1;
    font-weight: 900;

    text-shadow: 0 3.2px 4.8px #000;
    box-shadow:
        0 0 16px rgba(255, 210, 65, .38),
        0 4.8px 11.2px rgba(0,0,0,.65);
}

@media (max-width: 1px) {
    .exploreScoreBadge {
        min-width: 48px;
        height: 54.4px;
        padding: 0 9.6px;
        font-size: 38.4px;
    }
}


/* ===== Tie-priority icon ===== */
.tieInfo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 11.2px;
}

.tieLabel {
    white-space: nowrap;
}

.tiePlayerIcon {
    width: 54.4px;
    height: 54.4px;
    object-fit: contain;
    filter: drop-shadow(0 3.2px 6.4px rgba(0,0,0,.75));
}

.tiePlayerBadge {
    display: inline-flex;
    align-items: center;
    gap: 4.8px;
    min-width: 76.8px;
    justify-content: flex-start;
}

.tiePlayerName {
    color: #ffe469;
    font-size: 25.6px;
    line-height: 1;
    font-weight: 900;
    text-shadow: 0 3.2px 4.8px #000;
}

/* ===== Treasure deck same size as treasure cards ===== */
.treasureDeckStack {
    padding-top: 0;
    width: 100%;
}

.treasureDeckStack > img {
    width: 100%;
    aspect-ratio: 0.72;
    object-fit: contain;
    border-radius: 14.4px;
}

.treasureDeckStack .deckCount {
    margin-top: 8px;
    line-height: 1;
}

@media (max-width: 1px) {
    .tieInfo {
        gap: 6.4px;
    }

    .tiePlayerIcon {
        width: 44.8px;
        height: 44.8px;
    }

    .tiePlayerName {
        font-size: 22.4px;
    }
}


/* ===== Equal-width explore deck + refill animation ===== */
.handRow {
    grid-template-columns: 1fr 5fr;
    gap: 8px;
}

.exploreDeckStack {
    width: 100%;
    min-width: 0;
}

.exploreDeckStack > img {
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
}

.exploreDeckStack .deckCount {
    margin-top: 8px;
    line-height: 1;
}

.refillFlyingBack,
.refillFlipCard {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    filter: drop-shadow(0 8px 12.8px rgba(0,0,0,.7));
}

@media (max-width: 1px) {
    .handRow {
        grid-template-columns: 1fr 5fr;
        gap: 4.8px;
    }

    .exploreDeckStack > img {
        width: 100%;
    }
}


/* ===== Round / game result overlay ===== */
.roundOverlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28.8px;
    background: rgba(0, 6, 10, .72);
    backdrop-filter: blur(4.8px);
    -webkit-backdrop-filter: blur(4.8px);
}

.roundOverlay[hidden] {
    display: none;
}

.roundPanel {
    width: min(92vw, 800px);
    padding: 35.2px 32px 28.8px;
    border: 3.2px solid rgba(218, 173, 67, .88);
    border-radius: 28.8px;
    background:
        radial-gradient(circle at 50% 10%, rgba(57, 78, 72, .35), transparent 42%),
        linear-gradient(180deg, rgba(12, 29, 34, .98), rgba(5, 16, 22, .98));
    box-shadow:
        0 25.6px 76.8px rgba(0,0,0,.72),
        inset 0 0 0 3.2px rgba(255,255,255,.035);
    color: #f8ecd0;
}

.roundResultTitle {
    text-align: center;
    color: #ffe58e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 43.2px;
    font-weight: 900;
    letter-spacing: .5px;
}

.roundResultReason {
    min-height: 35.2px;
    margin: 8px 0 22.4px;
    text-align: center;
    color: #e7dfcb;
    font-size: 22.4px;
}

.scoreTable {
    display: grid;
    grid-template-columns: 1.55fr .8fr .8fr;
    border-top: 1.6px solid rgba(255, 225, 140, .28);
    border-left: 1.6px solid rgba(255, 225, 140, .18);
}

.scoreTable > div {
    min-height: 60.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9.6px 11.2px;
    border-right: 1.6px solid rgba(255, 225, 140, .18);
    border-bottom: 1.6px solid rgba(255, 225, 140, .18);
}

.scoreHead {
    color: #ffe695;
    font-weight: 900;
    background: rgba(112, 83, 25, .18);
}

.scoreLabel {
    justify-content: flex-start !important;
    color: #e8e0ce;
    font-weight: 700;
}

.scoreValue {
    color: #fff3c8;
    font-weight: 800;
}

.curseScore {
    color: #efb7cf;
}

.roundTotalLabel,
.roundTotalValue {
    color: #ffe176;
    font-weight: 900;
    background: rgba(154, 115, 28, .11);
}

.totalLabel,
.totalValue {
    color: #fff0a4;
    font-weight: 900;
    font-size: 27.2px;
    background: rgba(154, 115, 28, .19);
}

.gameResultMessage {
    min-height: 48px;
    margin: 20.8px 0 4.8px;
    text-align: center;
    color: #ffe36f;
    font-size: 33.6px;
    font-weight: 900;
}

.nextRoundButton {
    display: block;
    width: 72%;
    max-width: 448px;
    height: 76.8px;
    margin: 19.2px auto 0;
    border: 3.2px solid #d2ad58;
    border-radius: 20.8px;
    background: linear-gradient(#256649, #123c2e);
    color: #fff0bd;
    font-size: 28.8px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6.4px 12.8px rgba(0,0,0,.45);
}

.nextRoundButton:disabled {
    opacity: .45;
    cursor: default;
}

.nextRoundStatus {
    min-height: 33.6px;
    margin-top: 12.8px;
    text-align: center;
    color: #dcd6c4;
    font-size: 20.8px;
}

@media (max-width: 1px) {
    .roundPanel {
        padding: 28.8px 22.4px 22.4px;
    }

    .roundResultTitle {
        font-size: 36.8px;
    }

    .scoreTable > div {
        min-height: 54.4px;
        padding: 8px 6.4px;
        font-size: 20.8px;
    }

    .nextRoundButton {
        height: 70.4px;
        font-size: 25.6px;
    }
}


/* ===== Exact treasure selection highlight ===== */
.treasure::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    border-radius: 12.8px;
    box-sizing: border-box;
    border: 0 solid transparent;
}

.treasure.myChoice::after {
    border-width: 8px;
    border-color: rgba(89, 202, 255, .98);
    box-shadow:
        inset 0 0 0 1.6px rgba(230, 250, 255, .55),
        0 0 12.8px rgba(79, 190, 255, .42);
}

.treasure.opponentChoice::after {
    border-width: 8px;
    border-color: rgba(255, 91, 76, .98);
    box-shadow:
        inset 0 0 0 1.6px rgba(255, 235, 231, .5),
        0 0 12.8px rgba(255, 82, 67, .38);
}

/* 같은 보물을 두 플레이어가 선택했을 때 두 색을 모두 표시 */
.treasure.myChoice.opponentChoice::after {
    border: 0;
    box-shadow:
        inset 0 0 0 8px rgba(89, 202, 255, .98),
        inset 0 0 0 16px rgba(255, 91, 76, .98),
        0 0 12.8px rgba(255, 215, 95, .4);
}

/* ===== RETURN notification ===== */
.returnNotice {
    position: fixed;
    inset: 0;
    z-index: 13000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(0, 6, 10, .48);
}

.returnNotice[hidden] {
    display: none;
}

.returnNoticePanel {
    width: min(82vw, 624px);
    padding: 35.2px 28.8px 32px;
    border: 3.2px solid rgba(223, 181, 71, .92);
    border-radius: 27.2px;
    background:
        radial-gradient(circle at 50% 0%, rgba(102, 74, 27, .30), transparent 55%),
        rgba(7, 19, 24, .97);
    box-shadow:
        0 22.4px 60.8px rgba(0,0,0,.72),
        inset 0 0 0 3.2px rgba(255,255,255,.035);
    text-align: center;
}

.returnNoticeTitle {
    color: #ffe06c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46.4px;
    font-weight: 900;
    letter-spacing: 1.6px;
}

.returnNoticeText {
    margin-top: 14.4px;
    color: #f6ecd5;
    font-size: 28.8px;
    font-weight: 800;
    line-height: 1.5;
}

@media (max-width: 1px) {
    .treasure.myChoice::after,
    .treasure.opponentChoice::after {
        border-width: 6.4px;
    }

    .treasure.myChoice.opponentChoice::after {
        box-shadow:
            inset 0 0 0 6.4px rgba(89, 202, 255, .98),
            inset 0 0 0 12.8px rgba(255, 91, 76, .98),
            0 0 11.2px rgba(255, 215, 95, .38);
    }

    .returnNoticeTitle {
        font-size: 40px;
    }

    .returnNoticeText {
        font-size: 25.6px;
    }
}


/* ===== Fixed 9:16 game surface + automatic whole-screen scaling =====
   Stage 1 authored canvas: 1080 x 1920.
   This is exactly the same 9:16 ratio as the final 1080 x 1920 target.
   JavaScript scales this fixed canvas as one unit to the real mobile viewport.
*/
html,
body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #050a0e;
}

body {
    position: relative;
    margin: 0;
    overscroll-behavior: none;
    touch-action: manipulation;
}

#game {
    width: 1080px !important;
    height: 1920px !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: 1920px !important;
    margin: 0 !important;

    position: fixed !important;
    left: 0;
    top: 0;

    transform-origin: 0 0;
    will-change: transform;
}

/* Do not let browser text auto-enlargement change the authored proportions. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* ===== Fullscreen start gate ===== */
.fullscreenGate {
    position: absolute;
    inset: 0;
    z-index: 15000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35.2px;
    /* 게임 본 화면이 뒤에서 먼저 그려져도 보이지 않도록
       시작 게이트가 자체 배경으로 완전히 덮는다. */
    background:
        linear-gradient(rgba(0, 6, 10, .88), rgba(0, 6, 10, .88)),
        var(--game-bg, url("images/background.png")) center top / cover no-repeat;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.fullscreenGate.hidden {
    display: none;
}

.fullscreenPanel {
    width: 88%;
    max-width: 832px;
    padding: 57.6px 44.8px 48px;
    border: 4.8px solid rgba(218, 173, 67, .92);
    border-radius: 35.2px;
    background:
        radial-gradient(circle at 50% 0%, rgba(110, 80, 25, .34), transparent 55%),
        rgba(7, 19, 24, .98);
    box-shadow:
        0 28.8px 86.4px rgba(0,0,0,.76),
        inset 0 0 0 3.2px rgba(255,255,255,.04);
    text-align: center;
}

.fullscreenTitle {
    color: #ffe496;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 64px;
    font-weight: 900;
    letter-spacing: 1.6px;
    line-height: 1.08;
}

.fullscreenGuide {
    margin-top: 32px;
    color: #f2e8d7;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.55;
}

.fullscreenStartButton {
    width: 90%;
    height: 115.2px;
    margin: 44.8px auto 0;
    border: 4.8px solid #d2ad58;
    border-radius: 25.6px;
    background: linear-gradient(#2d7655, #164a37);
    color: #fff0bd;
    font-size: 40px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 19.2px rgba(0,0,0,.48);
}

.fullscreenStartButton {
    border: 3.2px solid #d2ad58;
    background: linear-gradient(#256649, #123c2e);
    color: #fff0bd;
    font-size: 28.8px;
}



.fullscreenStartButton:active {
    transform: translateY(3.2px);
}


/* ===== Larger round result panel =====
   Result is the only important UI at this moment, so use most of the game surface.
*/
.roundPanel {
    width: 92% !important;
    max-width: none !important;
    min-height: 68% !important;
    padding: 54.4px 51.2px 44.8px !important;
    border-width: 4.8px !important;
    border-radius: 38.4px !important;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.roundResultTitle {
    font-size: 60.8px !important;
    line-height: 1.15 !important;
    margin-bottom: 12.8px !important;
}

.roundResultReason {
    min-height: 48px !important;
    margin: 12.8px 0 35.2px !important;
    font-size: 32px !important;
    line-height: 1.45 !important;
}

.scoreTable {
    width: 100%;
    grid-template-columns: 1.55fr .82fr .82fr !important;
}

.scoreTable > div {
    min-height: 89.6px !important;
    padding: 14.4px 16px !important;
    font-size: 33.6px !important;
}

.scoreHead {
    font-size: 35.2px !important;
}

.scoreLabel {
    font-size: 33.6px !important;
}

.scoreValue {
    font-size: 35.2px !important;
}

.roundTotalLabel,
.roundTotalValue {
    font-size: 36.8px !important;
}

.totalLabel,
.totalValue {
    font-size: 38.4px !important;
}

.gameResultMessage {
    min-height: 67.2px !important;
    margin: 32px 0 8px !important;
    font-size: 48px !important;
}

.nextRoundButton {
    width: 78% !important;
    max-width: 576px !important;
    height: 102.4px !important;
    margin-top: 38.4px !important;
    border-width: 4.8px !important;
    border-radius: 25.6px !important;
    font-size: 38.4px !important;
}

.nextRoundStatus {
    min-height: 48px !important;
    margin-top: 20.8px !important;
    font-size: 28.8px !important;
    line-height: 1.45 !important;
}

/* The start gate is also easier to read on phones. */
.fullscreenPanel {
    width: 92% !important;
    max-width: 928px !important;
}

.fullscreenTitle {
    font-size: 70.4px !important;
}

.fullscreenGuide {
    font-size: 33.6px !important;
}

.fullscreenStartButton {
    height: 124.8px !important;
    font-size: 43.2px !important;
}


/* ===== 3-player browser UI ===== */
.opponents3Wrap { display:block; }
.opponentPanelSecond { display:none; }
.opponent2MoveLane { display:none; }
.scoreOpp2 { display:none; }
body.mode3p .opponents3Wrap {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:space-between;
    align-items:flex-start;
    gap:22.4px;
    width:100%;
}
body.mode3p .opponentPanel3 {
    display:block;
    flex:0 0 calc(50% - 11.2px);
    width:calc(50% - 11.2px);
    min-width:0;
}
body.mode3p .opponentPanelSecond { display:block !important; }
body.mode3p .opponentPanel3 .opponentSummary { height:99.2px; margin-top:-8px; }
body.mode3p .opponentPanel3 .playerEmblem { width:92.8px; height:92.8px; }
body.mode3p .opponentPanel3 .collectionGrid {
    grid-template-columns:repeat(3,1fr);
    column-gap:6.4px; row-gap:4.8px; margin-top:0;
}
body.mode3p .opponentPanel3 .collectionLabel { font-size:19.2px; margin-bottom:1.6px; }
body.mode3p .opponentPanel3 .collectionIcons { min-height:49.6px; }
body.mode3p .opponentPanel3 .collectionIcons .iconWrap { width:44.8px; height:44.8px; margin-left:-9.6px; }
body.mode3p .opponentPanel3 .curseCell { grid-column:auto; margin-top:0; }
body.mode3p .opponentPanel3 .emptyCollection { width:44.8px !important; height:44.8px !important; }
body.mode3p .opponent2MoveLane {
    display:grid;
    height:0;
    position:relative;
    top:-120px;
    transform:translateX(32px);
    z-index:4;
}
body.mode3p .opponent2MoveLane .moveTarget::after { display:none; }
body.mode3p .scoreTable { grid-template-columns: 1.35fr repeat(3, 1fr); }
body.mode3p .scoreOpp2 { display:block; }
body.mode3p .treasure.opponent2Choice::after {
    content:""; position:absolute; inset:12.8px; border:6.4px solid #ffb347; border-radius:19.2px;
    pointer-events:none; box-shadow:0 0 14.4px rgba(255,179,71,.8);
}
body.mode3p #totalScore { font-size:27.2px; }


/* 3P top layout: opponent A left / opponent B right.
   Kept intentionally symmetric so a later 4P layout can place C beside ME at the bottom. */
body.mode3p .opponentPanel3 .playerHomeText {
    font-size:25.6px;
    white-space:nowrap;
}


/* ===== 3-player opponent A/B marks ===== */
.opponentEmblemRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11.2px;
}

.opponentMark {
    display: none;
    color: #ffe58a;
    font-size: 38.4px;
    font-weight: 900;
    line-height: 1;
    text-shadow:
        0 3.2px 4.8px rgba(0,0,0,.95),
        0 0 8px rgba(0,0,0,.8);
}

body.mode3p .opponentMark {
    display: inline-block;
}

/* 아이콘이 중앙 보물 쪽으로 이동해도 A/B 위치 표시는 남긴다. */
body.mode3p .playerHome.iconAway .opponentEmblemRow .opponentMark {
    visibility: visible;
}

body.mode3p .playerHome.iconAway .opponentEmblemRow .playerEmblem {
    visibility: hidden;
}

/* 기존 iconAway 텍스트는 3인에서는 쓰지 않음 */
body.mode3p .playerHome.iconAway .playerHomeText {
    display: none;
}


/* 3인 상단 A/B는 세트 배지를 더 작게 유지해 세로 공간을 늘리지 않는다. */
body.mode3p .opponentPanel3 .collectionIcons .setMark {
    width: 12.8px;
    height: 12.8px;
    top: 1.6px;
}
body.mode3p .opponentPanel3 .collectionIcons .setMarkPos1 { left: 1.6px; }
body.mode3p .opponentPanel3 .collectionIcons .setMarkPos3 { right: 1.6px; }

/* 대표 아이콘 + 획득 개수 방식이라 좌우 폭도 줄어든다. */
.collectionIcons .compactCollectionIcon {
    margin-left: 0;
}


/* =========================================================
   v7: 3P opponent boxes
   Applied to the real #opponentPanel1 / #opponentPanel2 nodes.
   ========================================================= */
body.mode3p #opponentPanel1.opponentAreaBox,
body.mode3p #opponentPanel2.opponentAreaBox {
    box-sizing: border-box !important;
    border: 2.4px solid rgba(224, 190, 92, .70) !important;
    border-radius: 17.6px !important;
    background: rgba(5, 17, 23, .24) !important;
    box-shadow:
        inset 0 0 0 1.6px rgba(255,255,255,.025),
        0 3.2px 12.8px rgba(0,0,0,.22) !important;
    padding: 6.4px 9.6px 8px !important;
}

/* Keep 2P unchanged. */
body:not(.mode3p) #opponentPanel1.opponentAreaBox,
body:not(.mode3p) #opponentPanel2.opponentAreaBox {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}


/* =========================================================
   v7: 3P / 4P round-result compact layout
   Existing fullscreen rules use !important, so these overrides
   also MUST use !important and must come last.
   ========================================================= */
body.mode3p .roundPanel,
body.mode4p .roundPanel {
    width: min(94vw, 800px) !important;
    padding: 28.8px 25.6px 24px !important;
}

body.mode3p .roundResultTitle,
body.mode4p .roundResultTitle {
    font-size: 43.2px !important;
    line-height: 1.12 !important;
    margin-bottom: 6.4px !important;
}

body.mode3p .roundResultReason,
body.mode4p .roundResultReason {
    min-height: 32px !important;
    margin: 6.4px 0 16px !important;
    font-size: 20.8px !important;
    line-height: 1.3 !important;
}

/* 4 columns: label + me + opponent A + opponent B */
body.mode3p .scoreTable {
    grid-template-columns: 1.22fr repeat(3, .92fr) !important;
    width: 100% !important;
}

/* Future 4P: label + four players */
body.mode4p .scoreTable {
    grid-template-columns: 1.18fr repeat(4, .82fr) !important;
    width: 100% !important;
}

body.mode3p .scoreTable > div,
body.mode4p .scoreTable > div {
    min-height: 54.4px !important;
    padding: 6.4px 4.8px !important;
    font-size: 20.8px !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
}

body.mode3p .scoreHead,
body.mode3p .scoreLabel,
body.mode3p .scoreValue,
body.mode3p .roundTotalLabel,
body.mode3p .roundTotalValue,
body.mode3p .totalLabel,
body.mode3p .totalValue {
    font-size: 20.8px !important;
}

body.mode4p .scoreTable > div,
body.mode4p .scoreHead,
body.mode4p .scoreLabel,
body.mode4p .scoreValue,
body.mode4p .roundTotalLabel,
body.mode4p .roundTotalValue,
body.mode4p .totalLabel,
body.mode4p .totalValue {
    font-size: 17.6px !important;
}

body.mode3p .scoreOpp2 {
    display: flex !important;
}

body.mode3p .nextRoundButton,
body.mode4p .nextRoundButton {
    font-size: 28.8px !important;
    min-height: 76.8px !important;
}

body.mode3p .nextRoundStatus,
body.mode4p .nextRoundStatus {
    font-size: 19.2px !important;
}


/* =========================================================
   v8: acquired treasure count immediately beside its icon
   ========================================================= */
.collectionIcons {
    position: relative;
}

.collectionIcons > .compactCollectionIcon + .countBubble {
    position: absolute !important;
    left: 49.6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 5 !important;
}

/* 3P top A/B icons are smaller, so keep the number tighter. */
body.mode3p .opponentPanel3 .collectionIcons > .compactCollectionIcon + .countBubble {
    left: 38.4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}


/* =========================================================
   v9: acquired treasure count bubble = true circle
   ========================================================= */
.collectionIcons > .compactCollectionIcon + .countBubble {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 24px !important;
    font-size: 14.4px !important;
    white-space: nowrap !important;
}

/* 3P opponent A/B: smaller true circle so it does not cover the icon */
body.mode3p .opponentPanel3 .collectionIcons > .compactCollectionIcon + .countBubble {
    width: 19.2px !important;
    height: 19.2px !important;
    min-width: 19.2px !important;
    min-height: 19.2px !important;
    left: 35.2px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 12.8px !important;
    line-height: 19.2px !important;
}


/* =========================================================
   v10 Dinosaur collection readability
   ========================================================= */

/* Dinosaur acquired-icon area: keep the background fully transparent.
   Icon contrast will be handled by the icon artwork itself. */
body.theme-dinosaur .collectionIcons {
    min-height: 83.2px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* My acquired dinosaurs: larger without adding a new row. */
body.theme-dinosaur .collectionIcons .iconWrap {
    width: 70.4px;
    height: 70.4px;
}

/* Top A/B needs compactness, but 44.8px was too small against the jungle. */
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons {
    min-height: 60.8px;
    border-radius: 11.2px;
}
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .iconWrap {
    width: 54.4px;
    height: 54.4px;
    margin-left: -8px;
}
body.theme-dinosaur.mode3p .opponentPanel3 .emptyCollection {
    width: 54.4px !important;
    height: 54.4px !important;
}

/* Make acquired icon itself stand out from the lighter well. */
body.theme-dinosaur .collectionIcons .iconWrap > img:first-child {
    filter:
        drop-shadow(0 1.6px 1.6px rgba(255,255,255,.25))
        drop-shadow(0 3.2px 4.8px rgba(0,0,0,.90));
}

/* Count bubbles: still circular, but no longer tiny. */
body.theme-dinosaur .collectionIcons > .compactCollectionIcon + .countBubble {
    width: 30.4px !important;
    height: 30.4px !important;
    min-width: 30.4px !important;
    min-height: 30.4px !important;
    left: 60.8px !important;
    font-size: 17.6px !important;
    line-height: 30.4px !important;
    border-width: 2.4px !important;
}

body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons > .compactCollectionIcon + .countBubble {
    width: 25.6px !important;
    height: 25.6px !important;
    min-width: 25.6px !important;
    min-height: 25.6px !important;
    left: 46.4px !important;
    font-size: 14.4px !important;
    line-height: 25.6px !important;
}

/* Set badges scale with the slightly larger Dino icons. */
body.theme-dinosaur .collectionIcons .setMark {
    width: 19.2px;
    height: 19.2px;
}
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .setMark {
    width: 14.4px;
    height: 14.4px;
}

/* Volcano values need to remain readable even if five are collected. */
body.theme-dinosaur .collectionIcons .curseValue {
    font-size: 17.6px;
    line-height: 1;
    margin-left: 1.6px;
}
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .curseValue {
    font-size: 14.4px;
}

/* Slightly strengthen opponent box background only in Dinosaur theme. */
body.theme-dinosaur.mode3p #opponentPanel1.opponentAreaBox,
body.theme-dinosaur.mode3p #opponentPanel2.opponentAreaBox {
    background: rgba(18, 28, 20, .40) !important;
    border-color: rgba(222, 198, 111, .78) !important;
}


/* v11: acquired icon/count/set badge layout */
.collectionIcons .collectionItem {
    display:inline-flex; align-items:center; justify-content:flex-start;
    gap:6.4px; min-width:0;
}
.collectionIcons .collectionCountInfo {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:28.8px; line-height:1; margin-left:1.6px;
}
.collectionIcons .countNumber {
    position:static !important; transform:none !important;
    width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important;
    padding:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important;
    background:none !important; box-shadow:none !important;
    font-weight:900; font-size:35.2px; line-height:1; color:#f7e7a8;
    text-shadow:0 1.6px 3.2px rgba(0,0,0,.95);
}
.collectionIcons .setBadgeRow {
    display:flex; align-items:center; justify-content:center; gap:1.6px;
    height:20.8px; margin-bottom:1.6px;
}
.collectionIcons .setBadgeAboveCount {
    position:static !important; width:19.2px !important; height:19.2px !important;
    object-fit:contain; filter:drop-shadow(0 1.6px 1.6px rgba(0,0,0,.9));
}
body.mode3p .opponentPanel3 .collectionIcons .collectionItem { gap:4.8px; }
body.mode3p .opponentPanel3 .collectionIcons .collectionCountInfo { min-width:22.4px; }
body.mode3p .opponentPanel3 .collectionIcons .countNumber { font-size:25.6px !important; }
body.mode3p .opponentPanel3 .collectionIcons .setBadgeRow { height:17.6px; }
body.mode3p .opponentPanel3 .collectionIcons .setBadgeAboveCount {
    width:16px !important; height:16px !important;
}
.collectionIcons > .compactCollectionIcon + .countBubble,
body.mode3p .opponentPanel3 .collectionIcons > .compactCollectionIcon + .countBubble {
    display:none !important;
}

/* Dinosaur acquired-icon background intentionally disabled. */
body.theme-dinosaur .collectionIcons {
    background:transparent;
    box-shadow:none;
}
body.theme-dinosaur .collectionIcons .iconWrap { width:70.4px; height:70.4px; }
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .iconWrap { width:54.4px; height:54.4px; }

/* Center set badge */
.treasureCard { position:relative; }
.treasureCard .centerSetBadge {
    position:absolute; top:6.4px; right:6.4px; width:38.4px; height:38.4px;
    z-index:9; object-fit:contain; filter:drop-shadow(0 3.2px 3.2px rgba(0,0,0,.9));
    pointer-events:none;
}
body.theme-dinosaur .treasureCard .centerSetBadge { width:41.6px; height:41.6px; }


/* =========================================================
   v12: center card set badge — VNC-like size/position
   renderTable() uses: <img class="setBadge">
   ========================================================= */
.treasure .setBadge,
body.theme-dinosaur .treasure .setBadge {
    position: absolute !important;
    width: 64px !important;
    height: 64px !important;
    right: -8px !important;
    top: 6.4px !important;
    z-index: 12 !important;
    object-fit: contain !important;
    pointer-events: none !important;
    filter: drop-shadow(0 3.2px 4.8px rgba(0,0,0,.9)) !important;
}

/* Smaller screen fallback while preserving the same visual ratio. */
@media (max-width: 520px) {
    .treasure .setBadge,
    body.theme-dinosaur .treasure .setBadge {
        width: 57.6px !important;
        height: 57.6px !important;
        right: -6.4px !important;
        top: 6.4px !important;
    }
}


/* ===== 4-player browser UI v1 ===== */
.opponentPanelThird,.opponent3MoveLane,.scoreOpp3{display:none;}
.bottomPlayers4Wrap,.myBottom4Wrap{display:contents;}
body.mode4p .opponents3Wrap{display:flex!important;gap:22.4px;width:100%;}
body.mode4p #opponentPanel1,body.mode4p #opponentPanel2{display:block!important;flex:0 0 calc(50% - 11.2px);width:calc(50% - 11.2px);min-width:0;}
body.mode4p .opponentPanelSecond,body.mode4p .opponentPanelThird{display:block!important;}
body.mode4p .opponentPanel3 .opponentSummary{height:88px;margin-top:-6.4px;}
body.mode4p .opponentPanel3 .playerEmblem{width:80px;height:80px;}
body.mode4p .opponentPanel3 .collectionGrid{grid-template-columns:repeat(3,1fr);column-gap:4.8px;row-gap:3.2px;margin-top:0;}
body.mode4p .opponentPanel3 .collectionLabel{font-size:17.6px;margin-bottom:0;}
body.mode4p .opponentPanel3 .collectionIcons{min-height:44.8px;}
body.mode4p .opponentPanel3 .collectionIcons .iconWrap{width:41.6px;height:41.6px;margin-left:-9.6px;}
body.mode4p .opponentPanel3 .curseCell{grid-column:auto;margin-top:0;}
body.mode4p .opponentMark{display:inline-block;}
body.mode4p .playerHome.iconAway .opponentEmblemRow .opponentMark{visibility:visible;}
body.mode4p .playerHome.iconAway .opponentEmblemRow .playerEmblem{visibility:hidden;}
body.mode4p .playerHome.iconAway .playerHomeText{display:none;}
body.mode4p #opponentPanel1.opponentAreaBox,body.mode4p #opponentPanel2.opponentAreaBox,body.mode4p #opponentPanel3.opponentAreaBox{box-sizing:border-box!important;border:2.4px solid rgba(224,190,92,.70)!important;border-radius:17.6px!important;background:rgba(5,17,23,.24)!important;padding:6.4px 9.6px 8px!important;}
body.mode4p .bottomPlayers4Wrap{display:flex!important;align-items:flex-start;gap:22.4px;width:100%;margin-top:3.2px;}
body.mode4p .myBottom4Wrap,body.mode4p #opponentPanel3{display:block!important;flex:0 0 calc(50% - 11.2px);width:calc(50% - 11.2px);min-width:0;}
body.mode4p .myBottom4Wrap .myGrid{grid-template-columns:repeat(3,1fr);column-gap:4.8px;row-gap:3.2px;margin-top:0;}
body.mode4p .myBottom4Wrap .collectionLabel{font-size:17.6px;margin-bottom:0;}
body.mode4p .myBottom4Wrap .collectionIcons{min-height:44.8px;}
body.mode4p .myBottom4Wrap .mySummary{height:88px;margin-top:0;}
body.mode4p .myBottom4Wrap .playerEmblem{width:80px;height:80px;}
body.mode4p .opponent2MoveLane,body.mode4p .opponent3MoveLane{display:grid;height:0;position:relative;z-index:4;}
body.mode4p .opponent2MoveLane{top:-112px;transform:translateX(28.8px);}
body.mode4p .opponent3MoveLane{top:200px;transform:translateX(28.8px);}
body.mode4p .opponent2MoveLane .moveTarget::after,body.mode4p .opponent3MoveLane .moveTarget::after{display:none;}
body.mode4p .scoreOpp2,body.mode4p .scoreOpp3{display:flex!important;}
body.mode4p .treasure.opponent2Choice::after{content:"";position:absolute;inset:12.8px;border:6.4px solid #ffb347;border-radius:19.2px;pointer-events:none;}
body.mode4p .treasure.opponent3Choice::after{content:"";position:absolute;inset:20.8px;border:6.4px solid #b98cff;border-radius:19.2px;pointer-events:none;box-shadow:0 0 14.4px rgba(185,140,255,.8);}
body.mode4p #totalScore{font-size:24px;}
body.theme-dinosaur.mode4p .opponentPanel3 .collectionIcons,body.theme-dinosaur.mode4p .myBottom4Wrap .collectionIcons{background:transparent;box-shadow:none;border-radius:0;}


/* =========================================================
   v7 - remove translucent acquired-icon wells (Dinosaur)
   ========================================================= */
body.theme-dinosaur .collectionIcons,
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons,
body.theme-dinosaur.mode4p .opponentPanel3 .collectionIcons,
body.theme-dinosaur.mode4p .myBottom4Wrap .collectionIcons {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* =========================================================
   v13: 1080x1920 mobile layout refresh
   Goal: compact player identity rows + larger acquired icons.
   First pass targets 3-player Dinosaur Rescue without disturbing 2P.
   ========================================================= */

/* Horizontal player-ID badge built around the existing player artwork.
   The image remains the visual identity; A/B/C/D is the fixed room ID. */
body.mode3p .opponentEmblemRow,
body.mode3p .myEmblemRow {
    min-width: 147.2px;
    height: 54.4px;
    padding: 3.2px 14.4px 3.2px 8px;
    border: 2.4px solid rgba(225, 194, 105, .82);
    border-radius: 14.4px;
    background: linear-gradient(180deg, rgba(32,45,31,.92), rgba(12,25,20,.92));
    box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.035), 0 3.2px 8px rgba(0,0,0,.42);
    gap: 9.6px;
}

body.mode3p .opponentPanel3 .opponentSummary,
body.mode3p .mySummary {
    height: 60.8px !important;
    min-height: 60.8px !important;
    margin-top: 0 !important;
}

body.mode3p .opponentPanel3 .playerEmblem,
body.mode3p .mySummary .playerEmblem {
    width: 44.8px !important;
    height: 44.8px !important;
    flex: 0 0 44.8px;
    object-fit: contain;
    filter: drop-shadow(0 3.2px 4.8px rgba(0,0,0,.72));
}

body.mode3p .opponentMark,
body.mode3p .myPlayerMark {
    display: inline-block !important;
    font-size: 35.2px !important;
    line-height: 1 !important;
    min-width: 28.8px;
    text-align: center;
}

body.mode3p .myTag {
    display: inline-block;
    padding-left: 1.6px;
    color: #f7f0d8;
    font-size: 19.2px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1.6px 3.2px rgba(0,0,0,.9);
}

/* While an emblem is travelling toward a selected card, retain the fixed
   A/B/C/D identifier in the home badge. */
body.mode3p .playerHome.iconAway .opponentEmblemRow,
body.mode3p .playerHome.iconAway .myEmblemRow {
    justify-content: center;
}
body.mode3p .playerHome.iconAway .opponentEmblemRow .playerEmblem,
body.mode3p .playerHome.iconAway .myEmblemRow .playerEmblem {
    visibility: hidden;
    width: 0 !important;
    flex-basis: 0 !important;
}

/* Use the saved vertical space for the information players actually read. */
body.theme-dinosaur.mode3p .opponentPanel3 .collectionGrid,
body.theme-dinosaur.mode3p .myGrid {
    row-gap: 8px;
}

body.theme-dinosaur.mode3p .opponentPanel3 .collectionLabel,
body.theme-dinosaur.mode3p .myGrid .collectionLabel {
    font-size: 20.8px;
    line-height: 1.05;
    margin-bottom: 3.2px;
}

body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons,
body.theme-dinosaur.mode3p .myGrid .collectionIcons {
    min-height: 83.2px !important;
}

body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .iconWrap,
body.theme-dinosaur.mode3p .myGrid .collectionIcons .iconWrap {
    width: 76.8px !important;
    height: 76.8px !important;
    margin-left: 0 !important;
}

body.theme-dinosaur.mode3p .opponentPanel3 .emptyCollection,
body.theme-dinosaur.mode3p .myGrid .emptyCollection {
    width: 76.8px !important;
    height: 76.8px !important;
}

body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .collectionItem,
body.theme-dinosaur.mode3p .myGrid .collectionIcons .collectionItem {
    gap: 6.4px;
}
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .collectionCountInfo,
body.theme-dinosaur.mode3p .myGrid .collectionIcons .collectionCountInfo {
    min-width: 27.2px;
}
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .countNumber,
body.theme-dinosaur.mode3p .myGrid .collectionIcons .countNumber {
    font-size: 32px !important;
}
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .setBadgeRow,
body.theme-dinosaur.mode3p .myGrid .collectionIcons .setBadgeRow {
    height: 20.8px;
}
body.theme-dinosaur.mode3p .opponentPanel3 .collectionIcons .setBadgeAboveCount,
body.theme-dinosaur.mode3p .myGrid .collectionIcons .setBadgeAboveCount {
    width: 19.2px !important;
    height: 19.2px !important;
}

/* More compact player panels; content gets the space instead of the avatar. */
body.theme-dinosaur.mode3p #opponentPanel1.opponentAreaBox,
body.theme-dinosaur.mode3p #opponentPanel2.opponentAreaBox {
    padding: 6.4px 11.2px 9.6px !important;
}

/* Bottom ME collection no longer wastes 38.4px above the grid. */
body.theme-dinosaur.mode3p .myGrid {
    margin-top: 6.4px !important;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 8px;
}
body.theme-dinosaur.mode3p .myGrid .curseCell {
    grid-column: auto;
    margin-top: 0;
}

/* Moving player artwork is deliberately smaller than before; this keeps the
   center cards readable when multiple players choose the same slot. */
body.mode3p .movingPlayerEmblem {
    max-width: 54.4px !important;
    max-height: 54.4px !important;
}

/* =========================================================
   v14: compact center spacing for 1080x1920 mobile layout
   - reduce empty space above/below treasure cards
   - slightly reduce revealed exploration-power badge
   - do not let deck-count labels increase row height
   - bring action buttons closer to the exploration cards
   ========================================================= */

/* 3P: tighten the header + movement lane above the treasure row. */
body.mode3p .tableHeader {
    min-height: 54.4px;
}

body.mode3p .opponentMoveLane {
    height: 70.4px;
    margin-top: 0;
    margin-bottom: 0;
}

body.mode3p .opponentMoveLane .moveTarget {
    height: 64px;
}

/* The second opponent lane overlays the first lane in 3P; keep it centered
   inside the newly reduced 70.4px lane instead of using the old -120px offset. */
body.mode3p .opponent2MoveLane {
    top: -70.4px;
}

/* 3P: the lower movement lane was the largest source of blank space.
   Keep enough room for the compact player marker and score only. */
body.mode3p .myMoveLane {
    height: 64px;
    margin-top: 0;
    margin-bottom: 0;
}

body.mode3p .myMoveLane .moveTarget {
    height: 60.8px;
}

/* Revealed exploration-power score: still readable, but less dominant. */
body.mode3p .exploreScoreBadge {
    min-width: 46.4px;
    height: 49.6px;
    padding: 0 8px;
    border-radius: 12.8px;
    border-width: 2.4px;
    font-size: 35.2px;
    box-shadow:
        0 0 11.2px rgba(255, 210, 65, .30),
        0 3.2px 8px rgba(0,0,0,.62);
}

/* The remaining-treasure count belongs to the deck column only.
   Position it outside normal flow so it does not push the whole treasure row
   (and therefore all player markers) downward. */
body.mode3p .treasureDeckStack .deckCount {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6.4px);
    margin-top: 0;
    z-index: 2;
    pointer-events: none;
}

/* Same idea for the exploration deck count: its first-column label should not
   increase the row height or force the confirm button farther down. */
body.mode3p .exploreDeckStack {
    position: relative;
}

body.mode3p .exploreDeckStack .deckCount {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4.8px);
    margin-top: 0;
    z-index: 2;
    pointer-events: none;
}

/* Bring '선택 완료' closer to the exploration cards. */
body.mode3p .handTitle {
    margin-bottom: 8px;
}

body.mode3p .actionArea {
    margin-top: 4.8px;
}

body.mode3p .bottomBar {
    margin-top: 8px;
}

/* =========================================================
   v16: fixed 3-player 1080x1920 layout
   B/C = top left/right, A = full-width bottom.
   The 4P-only bottom opponent must not exist visually in 3P.
   Top B/C panels are taller so the treasure table moves lower.
   ========================================================= */

/* 3P bottom: A only. Remove the 4P-only C/D-side panel completely. */
body.mode3p #opponentPanel3,
body.mode3p .opponentPanelThird,
body.mode3p .opponent3MoveLane {
    display: none !important;
}

body.mode3p .bottomPlayers4Wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

body.mode3p .myBottom4Wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
}

/* B/C top panels: use more of the vertical space before the table. */
body.mode3p #opponentPanel1.opponentAreaBox,
body.mode3p #opponentPanel2.opponentAreaBox {
    min-height: 313.6px !important;
    padding: 9.6px 14.4px 14.4px !important;
}

body.mode3p #opponentPanel1 .collectionGrid,
body.mode3p #opponentPanel2 .collectionGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 11.2px !important;
    row-gap: 12.8px !important;
    margin-top: 8px !important;
}

body.mode3p #opponentPanel1 .collectionLabel,
body.mode3p #opponentPanel2 .collectionLabel {
    font-size: 20.8px !important;
    margin-bottom: 3.2px !important;
}

body.mode3p #opponentPanel1 .collectionIcons,
body.mode3p #opponentPanel2 .collectionIcons {
    min-height: 70.4px !important;
}

body.mode3p #opponentPanel1 .collectionIcons .iconWrap,
body.mode3p #opponentPanel2 .collectionIcons .iconWrap {
    width: 64px !important;
    height: 64px !important;
    margin-left: 0 !important;
}

body.mode3p #opponentPanel1 .emptyCollection,
body.mode3p #opponentPanel2 .emptyCollection {
    width: 64px !important;
    height: 64px !important;
}

/* The expanded B/C band is what deliberately pushes the fixed treasure table down. */
body.mode3p #tableArea {
    margin-top: 12.8px !important;
}

/* A owns the entire lower collection band in 3P. */
body.mode3p .myBottom4Wrap .myGrid {
    width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 12.8px !important;
    row-gap: 0 !important;
    margin: 16px 0 0 !important;
}

body.mode3p .myBottom4Wrap .myGrid .curseCell {
    grid-column: auto !important;
    margin-top: 0 !important;
}

body.mode3p .myBottom4Wrap .myGrid .collectionLabel {
    font-size: 24px !important;
    margin-bottom: 4.8px !important;
}

body.mode3p .myBottom4Wrap .myGrid .collectionIcons {
    min-height: 76.8px !important;
}

body.mode3p .myBottom4Wrap .myGrid .collectionIcons .iconWrap {
    width: 70.4px !important;
    height: 70.4px !important;
    margin-left: 0 !important;
}

body.mode3p .myBottom4Wrap .myGrid .emptyCollection {
    width: 70.4px !important;
    height: 70.4px !important;
}

/* Fixed A badge immediately follows A's full-width acquired-items band. */
body.mode3p .myBottom4Wrap .mySummary {
    align-self: center !important;
    width: auto !important;
    margin: 8px auto 0 !important;
}

/* Self marker uses space only for the fixed letter that belongs to this device. */
body.mode3p .playerSelfTag:empty {
    display: none !important;
}

/* =========================================================
   v18: player-centric collection data + moving full player badge
   ========================================================= */

/* Acquired count: readable on a phone. */
body.mode3p .collectionIcons .countNumber {
    font-size: 51.2px !important;
    line-height: .95 !important;
    min-width: 35.2px !important;
}
body.mode3p .collectionIcons .collectionCountInfo {
    min-width: 40px !important;
    margin-left: 4.8px !important;
}

/* High-contrast CSS set star. */
.collectionIcons .setBadgeRow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 33.6px !important;
    gap: 3.2px !important;
    margin-bottom: 1.6px !important;
}
.collectionIcons .setStarAboveCount {
    display: inline-block;
    font-size: 32px !important;
    line-height: 1 !important;
    color: #48a9ff !important;
    -webkit-text-stroke: .8px #d8f0ff;
    text-shadow:
        0 0 4.8px rgba(52,155,255,.95),
        0 0 11.2px rgba(28,103,220,.85),
        0 1.6px 3.2px rgba(0,0,0,.95);
    transform: translateY(1.6px);
}

/* When a set star is above the acquired count, lower the count a little so
   the star and number do not visually collide. */
body.mode3p .collectionIcons .setBadgeRow + .countNumber {
    transform: translateY(8px) !important;
}

/* In 3P the complete horizontal badge travels to the selected treasure.
   Keep its home slot reserved but hide the original while the clone is away. */
body.mode3p .playerHome.iconAway .opponentEmblemRow,
body.mode3p .playerHome.iconAway .myEmblemRow {
    visibility: hidden !important;
}

/* The moving clone is the same rectangular badge, not just the tiny round emblem. */
body.mode3p .movingPlayerEmblem.opponentEmblemRow,
body.mode3p .movingPlayerEmblem.myEmblemRow {
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    filter: drop-shadow(0 6.4px 12.8px rgba(0,0,0,.8));
}



/* =========================================================
   v19: keep moving player badge size stable + tune 3P top collection markers
   ========================================================= */

/* A/B/C badge must keep exactly the same rendered size while travelling.
   The normal home badge has a min-width, so explicitly remove that constraint
   from the fixed-position clone and do not let the old emblem max-size rules win. */
body.mode3p .movingPlayerEmblem {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
}
body.mode3p .movingPlayerEmblem.opponentEmblemRow,
body.mode3p .movingPlayerEmblem.myEmblemRow {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

/* Top-left / top-right opponent panels are narrower than the full-width
   local collection band.  Use a smaller set star there, but make the acquired
   count larger and lower it a little when a star row is present. */
body.mode3p #opponentPanel1 .collectionIcons .setBadgeRow,
body.mode3p #opponentPanel2 .collectionIcons .setBadgeRow {
    height: 24px !important;
    gap: 1.6px !important;
    margin-bottom: 0 !important;
}
body.mode3p #opponentPanel1 .collectionIcons .setStarAboveCount,
body.mode3p #opponentPanel2 .collectionIcons .setStarAboveCount {
    font-size: 20.8px !important;
    -webkit-text-stroke: .55px #d8f0ff;
    text-shadow:
        0 0 3.2px rgba(52,155,255,.95),
        0 0 8px rgba(28,103,220,.82),
        0 1.6px 1.6px rgba(0,0,0,.95);
}
body.mode3p #opponentPanel1 .collectionIcons .countNumber,
body.mode3p #opponentPanel2 .collectionIcons .countNumber {
    font-size: 60.8px !important;
    line-height: .86 !important;
    min-width: 40px !important;
}
body.mode3p #opponentPanel1 .collectionIcons .setBadgeRow + .countNumber,
body.mode3p #opponentPanel2 .collectionIcons .setBadgeRow + .countNumber {
    transform: translateY(11.2px) !important;
}

/* Full-width local player band keeps the larger set marker. */
body.mode3p .myGrid .collectionIcons .setStarAboveCount {
    font-size: 32px !important;
}

/* =========================================================
   v20: preserve the 3P moving badge's internal size exactly
        + keep top-panel count smaller than the full-width local count
   ========================================================= */

/* The moving clone leaves .mySummary/.opponentPanel3, so the old contextual
   44.8px emblem rule no longer matches it.  Without this rule the child image
   falls back to the global 118.4px playerEmblem size and appears to "grow".
   Pin every child of the travelling horizontal badge to the same dimensions
   it has at home. */
body.mode3p .movingPlayerEmblem.opponentEmblemRow .playerEmblem,
body.mode3p .movingPlayerEmblem.myEmblemRow .playerEmblem {
    width: 44.8px !important;
    height: 44.8px !important;
    flex: 0 0 44.8px !important;
    max-width: 44.8px !important;
    max-height: 44.8px !important;
    object-fit: contain !important;
}
body.mode3p .movingPlayerEmblem.opponentEmblemRow .opponentMark,
body.mode3p .movingPlayerEmblem.myEmblemRow .myPlayerMark {
    font-size: 35.2px !important;
    line-height: 1 !important;
    min-width: 28.8px !important;
}
body.mode3p .movingPlayerEmblem.myEmblemRow .myTag {
    font-size: 19.2px !important;
    line-height: 1 !important;
}

/* B/C are half-width panels.  Their count must be smaller than the bottom
   full-width local player's count, while still readable on a phone. */
body.mode3p #opponentPanel1 .collectionIcons .countNumber,
body.mode3p #opponentPanel2 .collectionIcons .countNumber {
    font-size: 43.2px !important;
    line-height: .92 !important;
    min-width: 30.4px !important;
}
body.mode3p #opponentPanel1 .collectionIcons .collectionCountInfo,
body.mode3p #opponentPanel2 .collectionIcons .collectionCountInfo {
    min-width: 33.6px !important;
    margin-left: 3.2px !important;
}
body.mode3p #opponentPanel1 .collectionIcons .setBadgeRow + .countNumber,
body.mode3p #opponentPanel2 .collectionIcons .setBadgeRow + .countNumber {
    transform: translateY(6.4px) !important;
}

/* Bottom local full-width band remains the larger reference size. */
body.mode3p .myGrid .collectionIcons .countNumber {
    font-size: 51.2px !important;
    line-height: .95 !important;
}


/* =========================================================
   v22: keep 4+ curse/volcano icons inside the width used by
        three normal icons.  1~3 keep the normal spacing.
   ========================================================= */

/* Upper half-width player panels: normal icon = 64px.
   4 icons: 40 + 3*(40-13.34) ~= 192px = width of 3 normal icons.
   5 icons: 40 + 4*(40-20)    = 192px. */
body.mode3p #opponentPanel1 .collectionIcons.curseStacked .curseCollectedItem + .curseCollectedItem,
body.mode3p #opponentPanel2 .collectionIcons.curseStacked .curseCollectedItem + .curseCollectedItem {
    margin-left: -21.6px !important;
}
body.mode3p #opponentPanel1 .collectionIcons.curseStacked5 .curseCollectedItem + .curseCollectedItem,
body.mode3p #opponentPanel2 .collectionIcons.curseStacked5 .curseCollectedItem + .curseCollectedItem {
    margin-left: -32px !important;
}

/* Full-width local player band: normal icon = 70.4px.
   4 icons compress to the footprint of 3 normal icons (211.2px),
   and 5 icons use the same maximum footprint. */
body.mode3p .myBottom4Wrap .myGrid .collectionIcons.curseStacked .curseCollectedItem + .curseCollectedItem {
    margin-left: -24px !important;
}
body.mode3p .myBottom4Wrap .myGrid .collectionIcons.curseStacked5 .curseCollectedItem + .curseCollectedItem {
    margin-left: -35.2px !important;
}

/* Keep the curse stack centered in its own cell and never allow it to push
   the previous treasure cell visually. */
body.mode3p .collectionIcons.curseStacked,
body.mode3p .collectionIcons.curseStacked5 {
    justify-content: center !important;
    overflow: visible !important;
}

/* =========================================================
   v23: mobile moving-badge scale + wider mobile round result
   ========================================================= */

/* The moving badge is scaled explicitly in JS because it is temporarily
   moved outside the transformed #game root.  Do not force authored child
   dimensions here; the parent transform now preserves the complete badge. */
body.mode3p .movingPlayerEmblem.opponentEmblemRow .playerEmblem,
body.mode3p .movingPlayerEmblem.myEmblemRow .playerEmblem {
    width: 44.8px !important;
    height: 44.8px !important;
    flex: 0 0 44.8px !important;
}

/* roundOverlay lives inside #game, which is itself scaled on phones.
   Using vw here makes the dialog effectively scale twice and appear narrow.
   On phone viewports use the authored game width instead. */
@media (max-width: 520px) {
    body.mode3p .roundPanel {
        width: 1008px !important;
        max-width: 1008px !important;
        padding: 32px 28.8px 27.2px !important;
    }
    body.mode3p .roundResultTitle {
        font-size: 49.6px !important;
    }
    body.mode3p .roundResultReason {
        font-size: 24px !important;
    }
    body.mode3p .scoreTable > div,
    body.mode3p .scoreHead,
    body.mode3p .scoreLabel,
    body.mode3p .scoreValue,
    body.mode3p .roundTotalLabel,
    body.mode3p .roundTotalValue,
    body.mode3p .totalLabel,
    body.mode3p .totalValue {
        font-size: 24px !important;
    }
}

/* =========================================================
   v26: 2-player player-centric layout
   - one full-width opponent at the top
   - local player owns the full-width lower collection band
   - same visual language as the completed 3P layout
   - 3P / 4P rules are intentionally untouched
   ========================================================= */

/* In 2P only one opponent exists. */
body:not(.mode3p):not(.mode4p) .opponents3Wrap {
    display: block !important;
    width: 100% !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel2,
body:not(.mode3p):not(.mode4p) #opponentPanel3,
body:not(.mode3p):not(.mode4p) .opponentPanelSecond,
body:not(.mode3p):not(.mode4p) .opponentPanelThird,
body:not(.mode3p):not(.mode4p) .opponent2MoveLane,
body:not(.mode3p):not(.mode4p) .opponent3MoveLane {
    display: none !important;
}

/* Full-width upper opponent band. */
body:not(.mode3p):not(.mode4p) #opponentPanel1.opponentAreaBox {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 2.4px solid rgba(224, 190, 92, .66) !important;
    border-radius: 19.2px !important;
    background: rgba(5, 17, 23, .24) !important;
    box-shadow:
        inset 0 0 0 1.6px rgba(255,255,255,.025),
        0 3.2px 12.8px rgba(0,0,0,.22) !important;
    padding: 9.6px 16px 12.8px !important;
}

/* Horizontal player badge: fixed room letter + player artwork. */
body:not(.mode3p):not(.mode4p) .opponentEmblemRow,
body:not(.mode3p):not(.mode4p) .myEmblemRow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 163.2px;
    height: 60.8px;
    padding: 3.2px 16px 3.2px 9.6px;
    border: 2.4px solid rgba(225, 194, 105, .82);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(32,45,31,.92), rgba(12,25,20,.92));
    box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.035), 0 3.2px 8px rgba(0,0,0,.42);
    gap: 11.2px;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .opponentSummary,
body:not(.mode3p):not(.mode4p) .mySummary {
    height: 67.2px !important;
    min-height: 67.2px !important;
    margin-top: 0 !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .playerEmblem,
body:not(.mode3p):not(.mode4p) .mySummary .playerEmblem {
    width: 49.6px !important;
    height: 49.6px !important;
    flex: 0 0 49.6px !important;
    object-fit: contain;
    filter: drop-shadow(0 3.2px 4.8px rgba(0,0,0,.72));
}
body:not(.mode3p):not(.mode4p) .opponentMark,
body:not(.mode3p):not(.mode4p) .myPlayerMark {
    display: inline-block !important;
    min-width: 30.4px;
    text-align: center;
    font-size: 36.8px !important;
    line-height: 1 !important;
}
body:not(.mode3p):not(.mode4p) .myTag {
    display: inline-block !important;
    color: #f7f0d8;
    font-size: 20.8px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1.6px 3.2px rgba(0,0,0,.9);
}

/* Six acquired-item categories share the full width in one row. */
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionGrid,
body:not(.mode3p):not(.mode4p) .myGrid {
    width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 14.4px !important;
    row-gap: 0 !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionGrid {
    margin-top: 11.2px !important;
}
body:not(.mode3p):not(.mode4p) .myGrid {
    margin: 16px 0 0 !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .curseCell,
body:not(.mode3p):not(.mode4p) .myGrid .curseCell {
    grid-column: auto !important;
    margin-top: 0 !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionLabel,
body:not(.mode3p):not(.mode4p) .myGrid .collectionLabel {
    font-size: 24px !important;
    line-height: 1.05;
    margin-bottom: 4.8px !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionIcons,
body:not(.mode3p):not(.mode4p) .myGrid .collectionIcons {
    min-height: 86.4px !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionIcons .iconWrap {
    width: 76.8px !important;
    height: 76.8px !important;
    margin-left: 0 !important;
}
body:not(.mode3p):not(.mode4p) .myGrid .collectionIcons .iconWrap {
    width: 83.2px !important;
    height: 83.2px !important;
    margin-left: 0 !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .emptyCollection {
    width: 76.8px !important;
    height: 76.8px !important;
}
body:not(.mode3p):not(.mode4p) .myGrid .emptyCollection {
    width: 83.2px !important;
    height: 83.2px !important;
}

/* Counts and set stars are intentionally larger than 3P top-panel values. */
body:not(.mode3p):not(.mode4p) .collectionIcons .collectionCountInfo {
    min-width: 40px !important;
    margin-left: 4.8px !important;
}
body:not(.mode3p):not(.mode4p) .collectionIcons .countNumber {
    font-size: 54.4px !important;
    line-height: .94 !important;
    min-width: 36.8px !important;
}
body:not(.mode3p):not(.mode4p) .collectionIcons .setBadgeRow {
    height: 28.8px !important;
    gap: 3.2px !important;
    margin-bottom: 0 !important;
}
body:not(.mode3p):not(.mode4p) .collectionIcons .setStarAboveCount {
    font-size: 27.2px !important;
}
body:not(.mode3p):not(.mode4p) .collectionIcons .setBadgeRow + .countNumber {
    transform: translateY(6.4px) !important;
}

/* Local player badge follows the acquired-items band. */
body:not(.mode3p):not(.mode4p) .bottomPlayers4Wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
body:not(.mode3p):not(.mode4p) .myBottom4Wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}
body:not(.mode3p):not(.mode4p) .myBottom4Wrap .mySummary {
    align-self: center !important;
    width: auto !important;
    margin: 9.6px auto 0 !important;
}

/* Compact movement lanes so 2P does not waste the extra vertical space. */
body:not(.mode3p):not(.mode4p) .tableHeader {
    min-height: 57.6px;
}
body:not(.mode3p):not(.mode4p) .opponentMoveLane {
    height: 76.8px;
    margin-top: 0;
    margin-bottom: 0;
}
body:not(.mode3p):not(.mode4p) .opponentMoveLane .moveTarget {
    height: 70.4px;
}
body:not(.mode3p):not(.mode4p) .myMoveLane {
    height: 70.4px;
    margin-top: 0;
    margin-bottom: 0;
}
body:not(.mode3p):not(.mode4p) .myMoveLane .moveTarget {
    height: 67.2px;
}
body:not(.mode3p):not(.mode4p) .exploreScoreBadge {
    min-width: 49.6px;
    height: 52.8px;
    padding: 0 9.6px;
    border-radius: 12.8px;
    border-width: 2.4px;
    font-size: 36.8px;
}

/* Deck counts should not push later sections down. */
body:not(.mode3p):not(.mode4p) .treasureDeckStack .deckCount,
body:not(.mode3p):not(.mode4p) .exploreDeckStack .deckCount {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 0;
    z-index: 2;
    pointer-events: none;
}
body:not(.mode3p):not(.mode4p) .treasureDeckStack .deckCount {
    top: calc(100% + 6.4px);
}
body:not(.mode3p):not(.mode4p) .exploreDeckStack {
    position: relative;
}
body:not(.mode3p):not(.mode4p) .exploreDeckStack .deckCount {
    top: calc(100% + 4.8px);
}
body:not(.mode3p):not(.mode4p) .handTitle {
    margin-bottom: 8px;
}
body:not(.mode3p):not(.mode4p) .actionArea {
    margin-top: 4.8px;
}
body:not(.mode3p):not(.mode4p) .bottomBar {
    margin-top: 8px;
}

/* 4+ curse / volcano cards overlap, limiting their footprint to about 3 icons. */
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionIcons.curseStacked .curseCollectedItem + .curseCollectedItem {
    margin-left: -25.6px !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionIcons.curseStacked5 .curseCollectedItem + .curseCollectedItem {
    margin-left: -38.4px !important;
}
body:not(.mode3p):not(.mode4p) .myGrid .collectionIcons.curseStacked .curseCollectedItem + .curseCollectedItem {
    margin-left: -28px !important;
}
body:not(.mode3p):not(.mode4p) .myGrid .collectionIcons.curseStacked5 .curseCollectedItem + .curseCollectedItem {
    margin-left: -41.6px !important;
}
body:not(.mode3p):not(.mode4p) .collectionIcons.curseStacked,
body:not(.mode3p):not(.mode4p) .collectionIcons.curseStacked5 {
    justify-content: center !important;
    overflow: visible !important;
}

/* Dinosaur theme uses the same geometry, without icon wells. */
body.theme-dinosaur:not(.mode3p):not(.mode4p) .collectionIcons {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Phone result panel: use the authored 1080px game surface instead of vw,
   avoiding double-shrink inside the scaled #game root. */
@media (max-width: 520px) {
    body:not(.mode3p):not(.mode4p) .roundPanel {
        width: 992px !important;
        max-width: 992px !important;
    }
}

/* =========================================================
   2P moving-badge scale fix
   The travelling badge clone is appended to <body>, so contextual rules such as
   .mySummary .playerEmblem no longer match. Pin the clone's internal artwork to
   exactly the same authored dimensions used by the home badge.
   ========================================================= */
body:not(.mode3p):not(.mode4p) .movingPlayerEmblem.myEmblemRow,
body:not(.mode3p):not(.mode4p) .movingPlayerEmblem.opponentEmblemRow {
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

body:not(.mode3p):not(.mode4p) .movingPlayerEmblem.myEmblemRow .playerEmblem,
body:not(.mode3p):not(.mode4p) .movingPlayerEmblem.opponentEmblemRow .playerEmblem {
    width: 49.6px !important;
    height: 49.6px !important;
    flex: 0 0 49.6px !important;
    max-width: 49.6px !important;
    max-height: 49.6px !important;
    object-fit: contain !important;
}

body:not(.mode3p):not(.mode4p) .movingPlayerEmblem.myEmblemRow .myPlayerMark,
body:not(.mode3p):not(.mode4p) .movingPlayerEmblem.opponentEmblemRow .opponentMark {
    font-size: 36.8px !important;
    line-height: 1 !important;
    min-width: 30.4px !important;
}

body:not(.mode3p):not(.mode4p) .movingPlayerEmblem.myEmblemRow .myTag {
    font-size: 20.8px !important;
    line-height: 1 !important;
}


/* =========================================================
   2P v28: center the temporary home label while the full badge is away.
   The hidden badge keeps its layout width for a stable return animation,
   so the label must overlay the whole home slot instead of sitting beside it.
   ========================================================= */
body:not(.mode3p):not(.mode4p) .playerHome.iconAway .playerHomeText {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    pointer-events: none !important;
}

/* =========================================================
   2P v29: round-result table must contain exactly 3 columns
   (label + me + opponent).  Extra 3P/4P cells stay in the DOM
   for shared markup, but must never participate in 2P grid flow.
   ========================================================= */
body:not(.mode3p):not(.mode4p) .scoreOpp2,
body:not(.mode3p):not(.mode4p) .scoreOpp3 {
    display: none !important;
}

body:not(.mode3p):not(.mode4p) .scoreTable {
    grid-template-columns: 1.55fr .82fr .82fr !important;
    width: 100% !important;
}

/* With only six result rows, do not force the 2P panel to occupy
   the old fullscreen minimum height. */
body:not(.mode3p):not(.mode4p) .roundPanel {
    min-height: 0 !important;
}


/* =========================================================
   v31: 4P = same acquired-area scale as 3P + full player badges
   ========================================================= */

/* Four equal player acquisition panels: each half-width panel uses the same
   authored dimensions as the 3P upper player panels. */
body.mode4p .opponents3Wrap,
body.mode4p .bottomPlayers4Wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 22.4px !important;
    width: 100% !important;
}

body.mode4p #opponentPanel1,
body.mode4p #opponentPanel2,
body.mode4p #opponentPanel3,
body.mode4p .myBottom4Wrap {
    display: block !important;
    flex: 0 0 calc(50% - 11.2px) !important;
    width: calc(50% - 11.2px) !important;
    min-width: 0 !important;
    min-height: 313.6px !important;
    box-sizing: border-box !important;
    border: 2.4px solid rgba(224, 190, 92, .70) !important;
    border-radius: 17.6px !important;
    background: rgba(5, 17, 23, .24) !important;
    box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.025), 0 3.2px 12.8px rgba(0,0,0,.22) !important;
    padding: 9.6px 14.4px 14.4px !important;
}

body.mode4p #opponentPanel1 .collectionGrid,
body.mode4p #opponentPanel2 .collectionGrid,
body.mode4p #opponentPanel3 .collectionGrid,
body.mode4p .myBottom4Wrap .myGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 11.2px !important;
    row-gap: 12.8px !important;
    margin-top: 8px !important;
}

body.mode4p #opponentPanel1 .collectionLabel,
body.mode4p #opponentPanel2 .collectionLabel,
body.mode4p #opponentPanel3 .collectionLabel,
body.mode4p .myBottom4Wrap .collectionLabel {
    font-size: 20.8px !important;
    line-height: 1.05 !important;
    margin-bottom: 3.2px !important;
}

body.mode4p #opponentPanel1 .collectionIcons,
body.mode4p #opponentPanel2 .collectionIcons,
body.mode4p #opponentPanel3 .collectionIcons,
body.mode4p .myBottom4Wrap .collectionIcons {
    min-height: 70.4px !important;
}

body.mode4p #opponentPanel1 .collectionIcons .iconWrap,
body.mode4p #opponentPanel2 .collectionIcons .iconWrap,
body.mode4p #opponentPanel3 .collectionIcons .iconWrap,
body.mode4p .myBottom4Wrap .collectionIcons .iconWrap {
    width: 64px !important;
    height: 64px !important;
    margin-left: 0 !important;
}

body.mode4p #opponentPanel1 .emptyCollection,
body.mode4p #opponentPanel2 .emptyCollection,
body.mode4p #opponentPanel3 .emptyCollection,
body.mode4p .myBottom4Wrap .emptyCollection {
    width: 64px !important;
    height: 64px !important;
}

body.mode4p #opponentPanel1 .curseCell,
body.mode4p #opponentPanel2 .curseCell,
body.mode4p #opponentPanel3 .curseCell,
body.mode4p .myBottom4Wrap .curseCell {
    grid-column: auto !important;
    margin-top: 0 !important;
}

/* Same horizontal player badge used in 3P. */
body.mode4p .opponentEmblemRow,
body.mode4p .myEmblemRow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 147.2px !important;
    height: 54.4px !important;
    padding: 3.2px 14.4px 3.2px 8px !important;
    border: 2.4px solid rgba(225, 194, 105, .82) !important;
    border-radius: 14.4px !important;
    background: linear-gradient(180deg, rgba(32,45,31,.92), rgba(12,25,20,.92)) !important;
    box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.035), 0 3.2px 8px rgba(0,0,0,.42) !important;
    gap: 9.6px !important;
}

body.mode4p #opponentPanel1 .opponentSummary,
body.mode4p #opponentPanel2 .opponentSummary,
body.mode4p #opponentPanel3 .opponentSummary,
body.mode4p .myBottom4Wrap .mySummary {
    height: 60.8px !important;
    min-height: 60.8px !important;
    margin-top: 0 !important;
}

body.mode4p .opponentSummary .playerEmblem,
body.mode4p .mySummary .playerEmblem {
    width: 44.8px !important;
    height: 44.8px !important;
    flex: 0 0 44.8px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3.2px 4.8px rgba(0,0,0,.72));
}

body.mode4p .opponentMark,
body.mode4p .myPlayerMark {
    display: inline-block !important;
    font-size: 35.2px !important;
    line-height: 1 !important;
    min-width: 28.8px !important;
    text-align: center !important;
}

body.mode4p .myTag {
    display: inline-block !important;
    padding-left: 1.6px !important;
    color: #f7f0d8 !important;
    font-size: 19.2px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 1.6px 3.2px rgba(0,0,0,.9) !important;
}

/* While the full badge is travelling, reserve its home position but hide the
   original badge so no duplicate icon/letter remains behind. */
body.mode4p .playerHome.iconAway .opponentEmblemRow,
body.mode4p .playerHome.iconAway .myEmblemRow {
    visibility: hidden !important;
}

/* Clones live outside scaled #game. Keep their authored internals identical;
   JS applies the real viewport scale to the whole clone. */
body.mode4p .movingPlayerEmblem.opponentEmblemRow,
body.mode4p .movingPlayerEmblem.myEmblemRow {
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
}
body.mode4p .movingPlayerEmblem.opponentEmblemRow .playerEmblem,
body.mode4p .movingPlayerEmblem.myEmblemRow .playerEmblem {
    width: 44.8px !important;
    height: 44.8px !important;
    flex: 0 0 44.8px !important;
}
body.mode4p .movingPlayerEmblem.opponentEmblemRow .opponentMark,
body.mode4p .movingPlayerEmblem.myEmblemRow .myPlayerMark {
    font-size: 35.2px !important;
    line-height: 1 !important;
    min-width: 28.8px !important;
}
body.mode4p .movingPlayerEmblem.myEmblemRow .myTag {
    font-size: 19.2px !important;
    line-height: 1 !important;
}

/* 4P count/set markers use the same readable top-panel sizes as 3P. */
body.mode4p .collectionIcons .collectionCountInfo {
    min-width: 33.6px !important;
    margin-left: 3.2px !important;
}
body.mode4p .collectionIcons .countNumber {
    font-size: 43.2px !important;
    line-height: .92 !important;
    min-width: 30.4px !important;
}
body.mode4p .collectionIcons .setBadgeRow {
    height: 24px !important;
    gap: 1.6px !important;
    margin-bottom: 0 !important;
}
body.mode4p .collectionIcons .setStarAboveCount {
    font-size: 20.8px !important;
    -webkit-text-stroke: .55px #d8f0ff;
}
body.mode4p .collectionIcons .setBadgeRow + .countNumber {
    transform: translateY(6.4px) !important;
}

/* Keep 4+ curse/volcano icons inside the same footprint as three normal icons. */
body.mode4p .collectionIcons.curseStacked .curseCollectedItem + .curseCollectedItem {
    margin-left: -21.6px !important;
}
body.mode4p .collectionIcons.curseStacked5 .curseCollectedItem + .curseCollectedItem {
    margin-left: -32px !important;
}
body.mode4p .collectionIcons.curseStacked,
body.mode4p .collectionIcons.curseStacked5 {
    justify-content: center !important;
    overflow: visible !important;
}

/* =========================================================
   v32: 4P vertical compaction
   Keep every acquired-area panel at the same authored size as
   the 3P top panels, and recover height only from the empty
   movement bands around the center cards.
   ========================================================= */

/* The player panels themselves remain 3P-sized (v31: 313.6px, 64px icons).
   Do not shrink them to make four players fit. */
body.mode4p #opponentPanel1,
body.mode4p #opponentPanel2,
body.mode4p #opponentPanel3,
body.mode4p .myBottom4Wrap {
    min-height: 313.6px !important;
}

/* Remove wasted vertical space above the three selectable cards.
   The movement targets are virtual animation destinations, so they do not
   need a 115.2px layout band. */
body.mode4p .tableHeader {
    min-height: 48px !important;
}

body.mode4p .opponentMoveLane {
    height: 44.8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.mode4p .opponentMoveLane .moveTarget {
    height: 54.4px !important;
}

/* B/C share the compact upper movement band. */
body.mode4p .opponent2MoveLane {
    height: 0 !important;
    top: -44.8px !important;
    transform: translateX(28.8px) !important;
}

/* D uses the same lower destination band as the local player, but remains
   slightly offset so two badges choosing the same card can both be seen. */
body.mode4p #tableArea {
    position: relative !important;
    margin-top: 6.4px !important;
}

body.mode4p .opponent3MoveLane {
    display: grid !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    height: 44.8px !important;
    transform: translateX(28.8px) !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

body.mode4p .opponent3MoveLane .moveTarget {
    height: 54.4px !important;
}

/* Remove the second large empty band below the center cards. */
body.mode4p .myMoveLane {
    height: 44.8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.mode4p .myMoveLane .moveTarget {
    height: 54.4px !important;
}

/* Remaining-card count is independent of player movement.  Keep it visually
   under the deck, but take it out of normal flow so it cannot push the whole
   card row / lower player panels downward. */
body.mode4p .treasureDeckStack {
    position: relative !important;
}

body.mode4p .treasureDeckStack .deckCount {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 6.4px) !important;
    margin-top: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Same treatment for the exploration deck count so the 4P page is not
   globally scaled down by a label that does not need layout height. */
body.mode4p .exploreDeckStack {
    position: relative !important;
}

body.mode4p .exploreDeckStack .deckCount {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 4.8px) !important;
    margin-top: 0 !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Keep the lower two 3P-sized acquired areas close to the cards. */
body.mode4p .bottomPlayers4Wrap {
    margin-top: 3.2px !important;
}

/* Compact only whitespace around the hand/actions; card and player-area sizes
   are deliberately unchanged. */
body.mode4p .handTitle {
    margin-bottom: 8px !important;
}
body.mode4p .actionArea {
    margin-top: 4.8px !important;
}
body.mode4p .bottomBar {
    margin-top: 8px !important;
}

/* =========================================================
   v33: 3P/4P curse score overlay + acquired-grid breathing room
   IMPORTANT: based on v32. Keep 4P panel dimensions and compaction intact.
   ========================================================= */

/* Move acquired contents slightly downward WITHOUT changing layout height.
   Using transform instead of margin prevents the 4P page from growing and
   being globally scaled down again. */
body.mode3p #opponentPanel1 .collectionGrid,
body.mode3p #opponentPanel2 .collectionGrid,
body.mode3p .myBottom4Wrap .myGrid,
body.mode4p #opponentPanel1 .collectionGrid,
body.mode4p #opponentPanel2 .collectionGrid,
body.mode4p #opponentPanel3 .collectionGrid,
body.mode4p .myBottom4Wrap .myGrid {
    transform: translateY(11.2px) !important;
}

/* Curse / volcano score overlays the icon instead of using a separate line. */
body.mode3p .collectionIcons .curseCollectedItem,
body.mode4p .collectionIcons .curseCollectedItem {
    position: relative !important;
}

body.mode3p .collectionIcons .curseCollectedItem .curseValue,
body.mode4p .collectionIcons .curseCollectedItem .curseValue {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 8 !important;
    width: auto !important;
    min-width: 0 !important;
    color: #ffd6e7 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow:
        0 3.2px 4.8px rgba(0,0,0,.98),
        0 0 6.4px rgba(0,0,0,.95),
        0 0 11.2px rgba(91,25,83,.90) !important;
    pointer-events: none !important;
}

/* Half-width player panels: same score size in 3P and 4P. */
body.mode3p #opponentPanel1 .curseCollectedItem .curseValue,
body.mode3p #opponentPanel2 .curseCollectedItem .curseValue,
body.mode4p #opponentPanel1 .curseCollectedItem .curseValue,
body.mode4p #opponentPanel2 .curseCollectedItem .curseValue,
body.mode4p #opponentPanel3 .curseCollectedItem .curseValue,
body.mode4p .myBottom4Wrap .curseCollectedItem .curseValue {
    font-size: 20.8px !important;
}

/* 3P local full-width player is slightly larger. */
body.mode3p .myBottom4Wrap .curseCollectedItem .curseValue {
    font-size: 22.4px !important;
}


/* =========================================================
   v51 / 1080 conversion baseline: use the full 1080 x 1920 authored height naturally
   ========================================================= */

body.mode3p .collectionIcons .curseCollectedItem,
body.mode4p .collectionIcons .curseCollectedItem {
    position: relative !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    vertical-align: top !important;
}

body.mode3p .collectionIcons .curseCollectedItem .curseValue,
body.mode4p .collectionIcons .curseCollectedItem .curseValue {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: block !important;
    margin: 3.2px 0 0 !important;
    min-width: 0 !important;
    width: auto !important;
    color: #ffd6e7 !important;
    font-size: 19.2px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-shadow: 0 3.2px 4.8px rgba(0,0,0,.98), 0 0 6.4px rgba(0,0,0,.90) !important;
}

body.mode3p .myBottom4Wrap .curseCollectedItem .curseValue {
    font-size: 20.8px !important;
}

body.mode3p #opponentPanel1 .collectionIcons,
body.mode3p #opponentPanel2 .collectionIcons,
body.mode4p #opponentPanel1 .collectionIcons,
body.mode4p #opponentPanel2 .collectionIcons,
body.mode4p #opponentPanel3 .collectionIcons,
body.mode4p .myBottom4Wrap .collectionIcons {
    min-height: 92.8px !important;
}

body.mode3p .myBottom4Wrap .myGrid .collectionIcons {
    min-height: 99.2px !important;
}

body.mode3p #opponentPanel1 .collectionGrid,
body.mode3p #opponentPanel2 .collectionGrid,
body.mode3p .myBottom4Wrap .myGrid,
body.mode4p #opponentPanel1 .collectionGrid,
body.mode4p #opponentPanel2 .collectionGrid,
body.mode4p #opponentPanel3 .collectionGrid,
body.mode4p .myBottom4Wrap .myGrid {
    transform: none !important;
}

/* 2P baseline */
body:not(.mode3p):not(.mode4p) #opponentPanel1.opponentAreaBox {
    min-height: 236.8px !important;
    padding-top: 14.4px !important;
    padding-bottom: 19.2px !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionGrid { margin-top: 19.2px !important; }
body:not(.mode3p):not(.mode4p) #tableArea { margin-top: 16px !important; }
body:not(.mode3p):not(.mode4p) .tableHeader { min-height: 67.2px !important; }
body:not(.mode3p):not(.mode4p) .opponentMoveLane { height: 89.6px !important; }
body:not(.mode3p):not(.mode4p) .opponentMoveLane .moveTarget { height: 83.2px !important; }
body:not(.mode3p):not(.mode4p) .myMoveLane { height: 83.2px !important; }
body:not(.mode3p):not(.mode4p) .myMoveLane .moveTarget { height: 76.8px !important; }
body:not(.mode3p):not(.mode4p) .myGrid { margin-top: 27.2px !important; }
body:not(.mode3p):not(.mode4p) .myBottom4Wrap .mySummary { margin-top: 16px !important; }
body:not(.mode3p):not(.mode4p) #handArea { margin-top: 16px !important; }
body:not(.mode3p):not(.mode4p) .handTitle { margin-bottom: 12.8px !important; }
body:not(.mode3p):not(.mode4p) .actionArea { margin-top: 14.4px !important; }
body:not(.mode3p):not(.mode4p) .bottomBar { margin-top: 17.6px !important; }
body:not(.mode3p):not(.mode4p) .statusText,
body:not(.mode3p):not(.mode4p) .resultText { margin-top: 11.2px !important; }

/* 3P baseline */
body.mode3p #opponentPanel1.opponentAreaBox,
body.mode3p #opponentPanel2.opponentAreaBox {
    min-height: 345.6px !important;
    padding-top: 12.8px !important;
    padding-bottom: 17.6px !important;
}
body.mode3p #opponentPanel1 .collectionGrid,
body.mode3p #opponentPanel2 .collectionGrid {
    margin-top: 14.4px !important;
    row-gap: 14.4px !important;
}
body.mode3p #tableArea { margin-top: 20.8px !important; }
body.mode3p .tableHeader { min-height: 64px !important; }
body.mode3p .opponentMoveLane { height: 80px !important; }
body.mode3p .opponentMoveLane .moveTarget { height: 73.6px !important; }
body.mode3p .opponent2MoveLane { top: -80px !important; }
body.mode3p .myMoveLane { height: 76.8px !important; }
body.mode3p .myMoveLane .moveTarget { height: 70.4px !important; }
body.mode3p .myBottom4Wrap .myGrid { margin-top: 24px !important; }
body.mode3p .myBottom4Wrap .mySummary { margin-top: 16px !important; }
body.mode3p #handArea { margin-top: 16px !important; }
body.mode3p .handTitle { margin-bottom: 12.8px !important; }
body.mode3p .actionArea { margin-top: 14.4px !important; }
body.mode3p .bottomBar { margin-top: 16px !important; }
body.mode3p .statusText,
body.mode3p .resultText { margin-top: 11.2px !important; }

/* 4P baseline */
body.mode4p #opponentPanel1,
body.mode4p #opponentPanel2,
body.mode4p #opponentPanel3,
body.mode4p .myBottom4Wrap {
    min-height: 332.8px !important;
    padding-top: 12.8px !important;
    padding-bottom: 16px !important;
}
body.mode4p #opponentPanel1 .collectionGrid,
body.mode4p #opponentPanel2 .collectionGrid,
body.mode4p #opponentPanel3 .collectionGrid,
body.mode4p .myBottom4Wrap .myGrid {
    margin-top: 11.2px !important;
    row-gap: 11.2px !important;
}
body.mode4p #tableArea { margin-top: 12.8px !important; }
body.mode4p .tableHeader { min-height: 57.6px !important; }
body.mode4p .opponentMoveLane { height: 57.6px !important; }
body.mode4p .opponentMoveLane .moveTarget { height: 60.8px !important; }
body.mode4p .opponent2MoveLane { height: 0 !important; top: -57.6px !important; }
body.mode4p .myMoveLane { height: 57.6px !important; }
body.mode4p .myMoveLane .moveTarget { height: 60.8px !important; }
body.mode4p .opponent3MoveLane { height: 57.6px !important; }
body.mode4p .opponent3MoveLane .moveTarget { height: 60.8px !important; }
body.mode4p .bottomPlayers4Wrap { margin-top: 12.8px !important; }
body.mode4p #handArea { margin-top: 11.2px !important; }
body.mode4p .handTitle { margin-bottom: 11.2px !important; }
body.mode4p .actionArea { margin-top: 11.2px !important; }
body.mode4p .bottomBar { margin-top: 12.8px !important; }
body.mode4p .statusText,
body.mode4p .resultText { margin-top: 9.6px !important; }



/* =========================================================
   v52 / 1080 conversion vertical balance: screenshot-based final vertical balance
   4P stays unchanged from v51.
   ========================================================= */

/* 2P: use substantially more of the lower empty area */
body:not(.mode3p):not(.mode4p) #opponentPanel1.opponentAreaBox {
    min-height: 268.8px !important;
    padding-top: 19.2px !important;
    padding-bottom: 27.2px !important;
}
body:not(.mode3p):not(.mode4p) #opponentPanel1 .collectionGrid { margin-top: 25.6px !important; }
body:not(.mode3p):not(.mode4p) #tableArea { margin-top: 28.8px !important; }
body:not(.mode3p):not(.mode4p) .tableHeader { min-height: 76.8px !important; }
body:not(.mode3p):not(.mode4p) .opponentMoveLane { height: 112px !important; }
body:not(.mode3p):not(.mode4p) .opponentMoveLane .moveTarget { height: 102.4px !important; }
body:not(.mode3p):not(.mode4p) .myMoveLane { height: 105.6px !important; }
body:not(.mode3p):not(.mode4p) .myMoveLane .moveTarget { height: 96px !important; }
body:not(.mode3p):not(.mode4p) .myGrid { margin-top: 38.4px !important; }
body:not(.mode3p):not(.mode4p) .myBottom4Wrap .mySummary { margin-top: 25.6px !important; }
body:not(.mode3p):not(.mode4p) #handArea { margin-top: 28.8px !important; }
body:not(.mode3p):not(.mode4p) .actionArea { margin-top: 24px !important; }
body:not(.mode3p):not(.mode4p) .bottomBar { margin-top: 27.2px !important; }
body:not(.mode3p):not(.mode4p) .statusText,
body:not(.mode3p):not(.mode4p) .resultText { margin-top: 16px !important; }

/* 3P: only a modest expansion */
body.mode3p #opponentPanel1.opponentAreaBox,
body.mode3p #opponentPanel2.opponentAreaBox {
    min-height: 361.6px !important;
    padding-top: 16px !important;
    padding-bottom: 22.4px !important;
}
body.mode3p #opponentPanel1 .collectionGrid,
body.mode3p #opponentPanel2 .collectionGrid {
    margin-top: 17.6px !important;
    row-gap: 16px !important;
}
body.mode3p #tableArea { margin-top: 27.2px !important; }
body.mode3p .tableHeader { min-height: 70.4px !important; }
body.mode3p .opponentMoveLane { height: 89.6px !important; }
body.mode3p .opponentMoveLane .moveTarget { height: 83.2px !important; }
body.mode3p .opponent2MoveLane { top: -89.6px !important; }
body.mode3p .myMoveLane { height: 86.4px !important; }
body.mode3p .myMoveLane .moveTarget { height: 80px !important; }
body.mode3p .myBottom4Wrap .myGrid { margin-top: 30.4px !important; }
body.mode3p .myBottom4Wrap .mySummary { margin-top: 20.8px !important; }
body.mode3p #handArea { margin-top: 22.4px !important; }
body.mode3p .actionArea { margin-top: 19.2px !important; }
body.mode3p .bottomBar { margin-top: 20.8px !important; }
body.mode3p .statusText,
body.mode3p .resultText { margin-top: 14.4px !important; }

/* 4P intentionally unchanged. */


/* =========================================================
   v54: 3P vertical position correction
   2P and 4P keep v53 exactly as-is.
   3P returns to the tighter v51 spacing because v52 pushed
   the lower half too far down on the 1080x1920 canvas.
   ========================================================= */
body.mode3p #opponentPanel1.opponentAreaBox,
body.mode3p #opponentPanel2.opponentAreaBox {
    min-height: 345.6px !important;
    padding-top: 12.8px !important;
    padding-bottom: 17.6px !important;
}

body.mode3p #opponentPanel1 .collectionGrid,
body.mode3p #opponentPanel2 .collectionGrid {
    margin-top: 14.4px !important;
    row-gap: 14.4px !important;
}

body.mode3p #tableArea { margin-top: 20.8px !important; }
body.mode3p .tableHeader { min-height: 64px !important; }

body.mode3p .opponentMoveLane { height: 80px !important; }
body.mode3p .opponentMoveLane .moveTarget { height: 73.6px !important; }
body.mode3p .opponent2MoveLane { top: -80px !important; }

body.mode3p .myMoveLane { height: 76.8px !important; }
body.mode3p .myMoveLane .moveTarget { height: 70.4px !important; }

body.mode3p .myBottom4Wrap .myGrid { margin-top: 24px !important; }
body.mode3p .myBottom4Wrap .mySummary { margin-top: 16px !important; }

body.mode3p #handArea { margin-top: 16px !important; }
body.mode3p .handTitle { margin-bottom: 12.8px !important; }
body.mode3p .actionArea { margin-top: 14.4px !important; }
body.mode3p .bottomBar { margin-top: 16px !important; }

body.mode3p .statusText,
body.mode3p .resultText { margin-top: 11.2px !important; }


/* =========================================================
   v55: reveal score badge size fix after 1080x1920 conversion
   exploreScoreBadge is appended to <body>, outside the scaled #game.
   Therefore its physical CSS size must NOT be multiplied by 1.6.
   Restore the pre-conversion on-screen sizes.
   ========================================================= */

.exploreScoreBadge {
    min-width: 34px !important;
    height: 38px !important;
    padding: 0 7px !important;
    border-radius: 10px !important;
    border-width: 2px !important;
    font-size: 28px !important;
    text-shadow: 0 2px 3px #000 !important;
    box-shadow:
        0 0 10px rgba(255, 210, 65, .38),
        0 3px 7px rgba(0,0,0,.65) !important;
}

/* 2P was intentionally a little smaller than the generic badge. */
body:not(.mode3p):not(.mode4p) .exploreScoreBadge {
    min-width: 31px !important;
    height: 33px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    font-size: 23px !important;
}

/* 3P also used a compact badge so it would not dominate the player marker. */
body.mode3p .exploreScoreBadge {
    min-width: 29px !important;
    height: 31px !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    font-size: 22px !important;
    box-shadow:
        0 0 7px rgba(255, 210, 65, .30),
        0 2px 5px rgba(0,0,0,.62) !important;
}

/* 4P uses the generic 34x38 badge. */



/*
 * RETURN / ESCAPE notice layer safety.
 * 2P/3P/4P reveal markers are appended directly to <body> with high z-index.
 * Hide them for the whole RETURN notice state, including markers created later
 * by already-scheduled reveal callbacks.
 */
body.return-notice-active .movingPlayerEmblem,
body.return-notice-active .exploreScoreBadge {
    visibility: hidden !important;
    opacity: 0 !important;
}


/* ===== Initial GamePlay placement =====
 * 1080x1920 원본 캔버스가 첫 프레임에 보였다가 중앙으로 이동하는 현상 방지.
 * 첫 fit 계산이 끝난 뒤 이미 중앙에 배치된 상태로 즉시 표시한다.
 */
#game {
    visibility: hidden;
}

#game.game-position-ready {
    visibility: visible;
}


/* ===== 2026-09-25 score fixes ===== */
/* ROUND는 작게, 실시간 누적 점수는 더 크게 표시 */
#roundInfo {
    font-size: 24px !important;
}
#totalScore {
    font-size: 35.2px !important;
    font-weight: 900 !important;
}
body.mode3p #totalScore { font-size: 30.4px !important; }
body.mode4p #totalScore { font-size: 27.2px !important; }

/* 3P 결과표는 label + 나 + 상대1 + 상대2의 정확한 4열로 고정.
   과거 4P 클래스가 남더라도 네 번째 상대 열이 끼어들지 않게 방어한다. */
body.mode3p .scoreTable {
    grid-template-columns: 1.22fr repeat(3, .92fr) !important;
}
body.mode3p .scoreOpp2 {
    display: flex !important;
}
body.mode3p .scoreOpp3 {
    display: none !important;
}