:root {
    --lawn-width: 28;
    --lawn-height: 35;
    /* 
       Dynamic Yard Unit:
       We want to fit 28 yards width and 35 yards height into the viewport.
       Leaves 60px vertical for top controls AND 60px for bottom button?
       Let's allocate 120px total vertical space for UI.
    */
    --viewport-w: 95vw;
    /* Use dvh (dynamic viewport height) to account for mobile browser UI bars */
    --viewport-h: calc(95dvh - 120px);

    /* 
       Calculate the max yard size that fits both dimensions.
       Yard = min(W / 28, H / 35).
    */
    --yard: min(calc(var(--viewport-w) / var(--lawn-width)), calc(var(--viewport-h) / var(--lawn-height)));

    --grass-color: #4a8c4a;
    --ball-size: 20px;
    /* Default size, updated by JS */
    --hoop-width: calc(1.5 * var(--yard));
    /* Roughly 1.5 yards wide visually? No, 3.75 inches is tiny. 
       Visual representation usually exaggerates hoops.
       Let's stick to pixel-ish or small relative size.
       Previous was 30px. Let's make it relative to yard so it scales.
       Say 1.5 yards? No that's huge. 
       Let's keep it somewhat fixed or slightly scalable.
       Actually, for visibility, usually they are drawn larger.
       Let's try 0.8 yard width to be visible but not massive.
                                            */
    --hoop-width-dynamic: calc(1.35 * var(--yard));
    --hoop-thickness: 6px;
    --hoop-color: white;
    /* Base color */
    --outline-color: black;
    --outline-width: 1px;
    --red-highlight: #ff3333;
    /* Brighter red for visibility */
    --peg-size: calc(0.5 * var(--yard));
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* Fallback */
    height: 100dvh;
    /* Dynamic viewport height for mobile */
    width: 100vw;
    margin: 0;
    background-color: #f0f0f0;
    font-family: sans-serif;
    user-select: none;
    overflow: hidden;
    /* Prevent scrolling */
}

#controls {
    height: 40px;
    margin-bottom: 10px;
    background: white;
    padding: 0 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 100;
    flex-shrink: 0;
    /* Verify controls don't shrink */
}

#controls button {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

#lawn-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

#lawn {
    width: calc(var(--lawn-width) * var(--yard));
    height: calc(var(--lawn-height) * var(--yard));
    background-color: var(--grass-color);
    position: relative;
    border: 2px solid white;
    border: 2px solid white;
    /* box-shadow removed to prevent export artifacts */
}

.hoop {
    position: absolute;
    width: var(--hoop-width-dynamic);
    height: var(--hoop-thickness);
    background-color: var(--hoop-color);
    border: var(--outline-width) solid var(--outline-color);
    /* box-sizing: border-box; */
    transform: translate(-50%, -50%);
    z-index: 20;
    pointer-events: none;
}

.hoop.hoop-blue {
    background-color: DodgerBlue;
}

.hoop.hoop-red {
    background-color: var(--red-highlight);
}

/* Hoop Positions */
#hoop-1 {
    left: calc(7 * var(--yard));
    top: calc(28 * var(--yard));
}

#hoop-2 {
    left: calc(7 * var(--yard));
    top: calc(7 * var(--yard));
}

#hoop-3 {
    left: calc(21 * var(--yard));
    top: calc(7 * var(--yard));
}

#hoop-4 {
    left: calc(21 * var(--yard));
    top: calc(28 * var(--yard));
}

#hoop-5 {
    left: calc(14 * var(--yard));
    top: calc(24.5 * var(--yard));
}

#hoop-6 {
    left: calc(14 * var(--yard));
    top: calc(10.5 * var(--yard));
}

#peg {
    position: absolute;
    width: var(--peg-size);
    height: var(--peg-size);
    background-color: white;
    /* Changed to White */
    border: 1px solid #333;
    border-radius: 50%;
    left: calc(14 * var(--yard));
    top: calc(17.5 * var(--yard));
    transform: translate(-50%, -50%);
    z-index: 5;
}

.ball {
    position: absolute;
    width: var(--ball-size);
    height: var(--ball-size);
    border-radius: 50%;
    border: 2px solid black;
    cursor: grab;
    z-index: 10;
    transform: translate(-50%, -50%);
    touch-action: none;
    background-color: white;
    /* Default fallback */
}

#ball-blue {
    background-color: DodgerBlue;
}

#ball-red {
    background-color: var(--red-highlight);
}

#ball-black {
    background-color: black;
}

#ball-yellow {
    background-color: yellow;
}

.ball:active {
    cursor: grabbing;
}

/* Initial ball positions (Corner I starts) */
#ball-blue {
    left: calc(1 * var(--yard));
    top: calc(34 * var(--yard));
}

#ball-red {
    left: calc(3 * var(--yard));
    top: calc(34 * var(--yard));
}

#ball-black {
    left: calc(5 * var(--yard));
    top: calc(34 * var(--yard));
}

#ball-yellow {
    left: calc(7 * var(--yard));
    top: calc(34 * var(--yard));
}

#save-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #eee;
    margin-top: 10px;
}

#save-image {
    padding: 10px 20px;
    font-size: 18px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#save-image:hover {
    background-color: #0056b3;
}

#share-image {
    padding: 10px 20px;
    font-size: 18px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#share-image:hover {
    background-color: #218838 !important;
    /* Force override of inline style on hover if needed, or rely on JS/CSS separation better next time */
}