/* Shared renderer layout for Møbee hex cards. Keep in sync across platforms. */

#game-board {
    --card-w: 240px;
    --card-h: 277px;
    --card-offset-x: 120px;
    --card-bottom-offset-y: 70px;
    --card-top-offset-y: -140px;
    --symbol-scale: 0.66;
    --symbol-12-size: 18%;
}

#game-board .card {
    width: var(--card-w) !important;
    height: var(--card-h) !important;
}

#game-board .card:nth-child(1) {
    top: calc(50% + var(--card-top-offset-y)) !important;
    left: 50% !important;
}

#game-board .card:nth-child(2) {
    top: calc(50% + var(--card-bottom-offset-y)) !important;
    left: calc(50% + var(--card-offset-x)) !important;
}

#game-board .card:nth-child(3) {
    top: calc(50% + var(--card-bottom-offset-y)) !important;
    left: calc(50% - var(--card-offset-x)) !important;
}

#game-board .symbol-container {
    width: calc(34% * var(--symbol-scale));
}

#game-board .card-12-symbols .symbol-12 {
    width: var(--symbol-12-size);
}

/* 12-symbol inner cardinal positions (shared) */
#game-board .card-12-symbols .symbol-12.pos-0-inner {
    top: 35%; left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
}
#game-board .card-12-symbols .symbol-12.pos-90-inner {
    top: 50%; left: 68%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
#game-board .card-12-symbols .symbol-12.pos-180-inner {
    top: 65%; left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
}
#game-board .card-12-symbols .symbol-12.pos-270-inner {
    top: 50%; left: 32%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 12-symbol outer cardinal positions (shared) */
#game-board .card-12-symbols .symbol-12.pos-0-outer {
    top: 15%; left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
}
#game-board .card-12-symbols .symbol-12.pos-90-outer {
    top: 50%; left: 87.5%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
#game-board .card-12-symbols .symbol-12.pos-180-outer {
    top: 85%; left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
}
#game-board .card-12-symbols .symbol-12.pos-270-outer {
    top: 50%; left: 12.5%;
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 12-symbol diagonal positions (shared) */
#game-board .card-12-symbols .symbol-12.pos-45 {
    top: 25%; left: 71.5%;
    transform: translate(-50%, -50%) rotate(-135deg);
}
#game-board .card-12-symbols .symbol-12.pos-135 {
    top: 75%; left: 71.5%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
#game-board .card-12-symbols .symbol-12.pos-225 {
    top: 75%; left: 28.5%;
    transform: translate(-50%, -50%) rotate(45deg);
}
#game-board .card-12-symbols .symbol-12.pos-315 {
    top: 25%; left: 28.5%;
    transform: translate(-50%, -50%) rotate(135deg);
}