:root {
    --canvas-size: min(100vw, 100vh);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Veranda', sans-serif;
    background: #000;
    overflow: hidden;
}

.game-container {
    width: 100vw;
    height: 100vh;
    aspect-ratio: 1/1;
    max-width: 100vh;
    max-height: 100vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: #000;
    position: relative;
    padding: calc(var(--canvas-size) * 0.01);

}

/* Weapon Overlays */
.weapon-overlay {
    position: absolute;
    bottom: calc(var(--canvas-size) * 0.01);
    width: calc(var(--canvas-size) * 0.3);
    height: auto;
    z-index: 1000;
}

.weapon-overlay.left-weapon {
    left: calc(var(--canvas-size) * 0.04);
}

.weapon-overlay.right-weapon {
    right: calc(var(--canvas-size) * -0.0);
}

.weapon-overlay .weapon-icon img {
    width: calc(var(--canvas-size) * 0.3);
    max-height: calc(var(--canvas-size) * 0.28);
    object-fit: contain;
}

/* Top Row - 1/3 height, 3 equal columns */
.top-row {
    height: calc(var(--canvas-size) * 0.33);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(var(--canvas-size) * 0.02);
}

.troop-left, .troop-right {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none !important;
}

.troop-hearts {
    position: absolute;
    top: calc(var(--canvas-size) * 0.01);
    left: calc(var(--canvas-size) * 0.01);
    display: flex;
    gap: calc(var(--canvas-size) * 0.005);
    z-index: 10;
}

.troop-hearts .heart {
    font-size: calc(var(--canvas-size) * 0.035);
}

.troop-iframe {
    width: 100%;
    height: 100%;
    border: none !important;    
}

.troop-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: calc(var(--canvas-size) * 0.008);
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: calc(var(--canvas-size) * 0.035);
}

.troop-right .troop-label {
    background: #2bcf3e;
}

.troop-left .troop-label {
    background: #d03731;
}

.vs-section {
    color: #deff00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: calc(var(--canvas-size) * 0.005) solid #deff00;
}

.vs-text {
    font-size: calc(var(--canvas-size) * 0.16);
    font-weight: bold;
    color: #deff00;
    width: 100%;
    border-bottom: calc(var(--canvas-size) * 0.005) solid #deff00;
}

.replay-text {
    font-weight: bold;
    color: white;
    cursor: pointer;
}

.game-description {
    font-size: calc(var(--canvas-size) * 0.02);
    font-weight: bold;
    width: 100%;
    height: 100%;
    padding: calc(var(--canvas-size) * 0.01);
    text-align: left;
}

.replay-text:hover {
    text-decoration: underline;
}

/* Middle Row */
.meter-row {
    height: calc(var(--canvas-size) * 0.17);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    padding-top: calc(var(--canvas-size) * 0.02);
    padding-bottom: calc(var(--canvas-size) * 0.02);
}

.health-meter {
    display: flex;
    width: 99%;
    height: 100%;
    gap: calc(var(--canvas-size) * 0.012);
    align-items: center;
}

.meter-bar {
    flex: 1;
    height: 100%;
    border-radius: calc(var(--canvas-size) * 0.007);
}

.meter-bar.red {
    background: #d03731;
}

.meter-bar.bright-red {
    background: #ff4444;
    filter: drop-shadow(0 0 calc(var(--canvas-size) * 0.015) #ff4444) brightness(2);
}

.meter-bar.bright-green {
    background: #44ff44;
    filter: drop-shadow(0 0 calc(var(--canvas-size) * 0.015) #44ff44) brightness(2);
}

.meter-bar.green {
    background: #2bcf3e;
}

/* Status Row */
.status-row {
    height: calc(var(--canvas-size) * 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: calc(var(--canvas-size) * 0.005);
    margin-right: calc(var(--canvas-size) * 0.005);
    margin-bottom: calc(var(--canvas-size) * 0.02);
    padding-right: calc(var(--canvas-size) * 0.015);
    padding-left: calc(var(--canvas-size) * 0.015);
    border: calc(var(--canvas-size) * 0.005) solid #deff00;
}

.status-text {
    color: #deff00;
    font-size: calc(var(--canvas-size) * 0.05);
    font-weight: bold;
    text-align: center;
    width: 100%;
}

.troops-remaining {
    font-size: calc(var(--canvas-size) * 0.02);
    font-weight: bold;
    /* padding: calc(var(--canvas-size) * 0.01) calc(var(--canvas-size) * 0.01); */
    background: #deff00;
    color: #000;
    width: 100%;
    text-align: center;
    bottom: 0;
}

.count {
    font-size: calc(var(--canvas-size) * 0.037);
    font-weight: bold;
}

/* Bottom Row */
.bottom-row {
    height: calc(var(--canvas-size) * 0.33);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(var(--canvas-size) * 0.02);
}

.left-weapon-info, .right-weapon-info {
    display: flex;
    flex-direction: column;
    padding: calc(var(--canvas-size) * 0.01) calc(var(--canvas-size) * 0.02);
}

.left-weapon-info {
    border: calc(var(--canvas-size) * 0.02) solid #d03731;
}

.right-weapon-info {
    border: calc(var(--canvas-size) * 0.02) solid #2bcf3e;
}

.search-info {
    display: flex;
}

.section-title {
    font-weight: bold;
    color: white;
    font-size: calc(var(--canvas-size) * 0.02);
}

.weapon-display {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.weapon-icon {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.weapon-icon img {
    width: calc(var(--canvas-size) * 0.1);
    height: auto;
}

.search-section {
    border-bottom: calc(var(--canvas-size) * 0.005) solid #deff00;
    border-left: calc(var(--canvas-size) * 0.005) solid #deff00;
    border-right: calc(var(--canvas-size) * 0.005) solid #deff00;
    width: 100%;
    height: 100%;
}

.search-header {
    width: 100%;
    font-size: calc(var(--canvas-size) * 0.033);
    font-weight: bold;
    background: #deff00;
    color: #000;
    padding-top: calc(var(--canvas-size) * 0.01); 
    padding-bottom: calc(var(--canvas-size) * 0.01); 
    text-align: center;
}

.troop-search {
    width: 100%;
    border-bottom: calc(var(--canvas-size) * 0.005) solid #deff00;
    text-align: center;
}

.search-input {
    width: 100%;
    border: none;
    background: black;
    color: white;
    text-align: center;
    font-size: calc(var(--canvas-size) * 0.05);
    padding-top: calc(var(--canvas-size) * 0.01);
    padding-bottom: calc(var(--canvas-size) * 0.01);
}

.stats {
    padding-top: calc(var(--canvas-size) * 0.01);
    padding-left: calc(var(--canvas-size) * 0.01);
    flex: 1;
}

.stats div {
    font-size: calc(var(--canvas-size) * 0.028);
    line-height: calc(var(--canvas-size) * 0.045);
    font-weight: bold;
    color: white;
}

.replay-interface {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.replay-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--canvas-size) * 0.02);
}

.replay-btn {
    font-size: calc(var(--canvas-size) * 0.04);
    font-weight: bold;
    color: #deff00;
    cursor: pointer;
    padding: calc(var(--canvas-size) * 0.005) calc(var(--canvas-size) * 0.01);
    min-width: calc(var(--canvas-size) * 0.03);
    text-align: center;
    transition: background-color 0.2s;
}

.replay-btn:hover {
    background-color: #deff00;
    color: #000;
}

.replay-block-num {
    font-size: calc(var(--canvas-size) * 0.035);
    font-weight: bold;
    color: white;
    min-width: calc(var(--canvas-size) * 0.1);
    text-align: center;
}

.replay-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--canvas-size) * 0.02);
}

.replay-action-btn {
    font-size: calc(var(--canvas-size) * 0.02);
    font-weight: bold;
    color: white;
    cursor: pointer;
    padding: calc(var(--canvas-size) * 0.005) calc(var(--canvas-size) * 0.01);
    transition: background-color 0.2s;
}

.replay-action-btn:hover {
    background-color: white;
    color: #000;
}

.play-btn {
    color: #2bcf3e;
    border-color: #2bcf3e;
}

.play-btn:hover {
    background-color: #2bcf3e;
    color: #000;
}

.exit-btn {
    color: #d03731;
    border-color: #d03731;
}

.exit-btn:hover {
    background-color: #d03731;
    color: white;
}