:root {
    --primary-color: #007AFF;
    /* iOS Blue */
    --accent-color: #5856D6;
    /* iOS Purple */
    --bg-color: #F2F2F7;
    --card-bg: #FFFFFF;
    --text-primary: #000000;
    --text-secondary: #8E8E93;
    --separator: #C6C6C8;
    --danger: #FF3B30;
    --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #000000;
        --card-bg: #1C1C1E;
        --text-primary: #FFFFFF;
        --text-secondary: #8E8E93;
        --separator: #38383A;
        --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: #ffb135;
    color: white;
    overflow: hidden;
    /* Prevent scrolling of the whole page, we want an app feel */
    height: 100vh;
    width: 100vw;
}

.app-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: relative;
    max-width: 600px;
    /* Tablet constraint */
    margin: 0 auto;
    background: #ff8d00;
}

/* Header */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    padding-top: max(20px, env(safe-area-inset-top));
    z-index: 10;
}

.app-header h1 {
    font-size: 34px;
    font-weight: 700;
    margin: auto;
    letter-spacing: -0.5px;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.icon-btn {
    background: rgba(120, 120, 128, 0.12);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--primary-color);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.icon-btn:active {
    transform: scale(0.95);
    background: rgba(120, 120, 128, 0.2);
}

/* Wheel */
.wheel-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-bottom: 40px;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s;
}

body.settings-open .wheel-container {
    transform: translateY(-15%) scale(0.85);
}

body.settings-open .action-btn {
    opacity: 0;
    pointer-events: none;
}

body.settings-open #backdrop {
    /* When settings are open, we want to see the wheel, so reduce backdrop opacity or remove it over the wheel area? 
       Actually, standard iOS sheets darken the back. 
       Let's keep the wheel visible but dimmed? Or fully visible?
       "Preview" implies visibility. Let's make the backdrop only cover the header/general, not obscure the wheel too much.
       But backdrop is z-index 90. Settings is 100. Wheel is default.
       We need to make sure the wheel pops out or backdrop is subtle.
    */
    background: rgba(0, 0, 0, 0.2);
}


.wheel-wrapper {
    position: relative;
    width: 95%;
    max-width: 380px;
    aspect-ratio: 1;
    margin: 10px;
    border-radius: 50%;
    border: 8px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    /* Prevent squeezing on short screens */
}

#wheel-canvas {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 3s cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Only used for resetting, JS handles spin */
}

.wheel-pointer {
    position: absolute;
    top: -25px;
    /* Moved up a bit */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 40px solid var(--text-primary);
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3));
    z-index: 20;
    /* Ensure this is on top of everything including center button if they overlap (they don't, but safety) */
}

.wheel-center-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d4d4d4 100%);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(255, 255, 255, 1);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.8);
}

.action-btn {
    background: linear-gradient(180deg, #4da3ff 0%, #007AFF 100%);
    color: white;
    font-size: 24px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    letter-spacing: 1px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    /* Resetting previous padding/radius to allow mix class usage if distinct */
    padding: 18px 56px;
    border-radius: 40px;
    box-shadow: 0 6px 0 #0051a8, 0 12px 24px rgba(0, 0, 0, 0.3);
}

.action-btn.spin-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 18px;
    box-shadow: 0 5px 0 #0051a8, 0 8px 20px rgba(0, 0, 0, 0.4);
    border: 4px solid rgba(255, 255, 255, 0.6);
}

.action-btn.spin-center:active {
    transform: translate(-50%, -50%) translateY(5px);
    box-shadow: 0 0 0 #0051a8, 0 4px 10px rgba(0, 0, 0, 0.3);
}

.action-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #0051a8, 0 4px 10px rgba(0, 0, 0, 0.3);
}

.action-btn:disabled {
    background: var(--text-secondary);
    box-shadow: none;
    cursor: not-allowed;
}

/* Settings Panel (Bottom Sheet) */
.settings-panel {
    position: fixed;
    border-radius: 16px;
    background: #ffae3d;
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);

    /* Responsive sizing & positioning */
    width: 95%;
    max-width: 600px;
    height: 60vh;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom));

    /* Centering + Animation */
    transform: translate(-50%, 0);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.settings-panel.hidden {
    transform: translate(-50%, 110%);
}

.panel-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--separator);
}

.panel-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 50px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

.settings-content::-webkit-scrollbar {
    width: 2px;
    background: transparent;
}

.settings-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.setting-group {
    background: rgb(255 157 0);
    /* iOS grouped table style */
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

.setting-group>label {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    text-transform: uppercase;
    color: white;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: -5px;
    /* Pull into the group visually if outside, but here I put label inside wrapper for simplicity in HTML, let's adjust */
}

/* Adjusting structure: usually label is outside. Let's make .setting-group just the container of rows */
.setting-title {
    margin: 0 0 8px 16px;
    font-size: 13px;
    text-transform: uppercase;
    color: white;
}

.items-list {
    display: flex;
    flex-direction: column;
}

.item-row {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: #ff8500;
    border-bottom: 1px solid var(--separator);
    gap: 10px;
    border-radius: 14px;
}

.item-row:last-child {
    border-bottom: none;
}

.color-wrapper {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.color-input-hidden {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
}

.item-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 17px;
    color: var(--text-primary);
    outline: none;
}

.remove-btn {
    color: var(--danger);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
}

.add-item-row {
    display: flex;
    padding: 6px 12px;
    background: #ff6600;
    margin-top: 3px;
}

#new-item-input {
    flex: 1;
    border: none;
    background: #ff6600;
    font-size: 18px;
    outline: none;
    color: white;
}

#new-item-input::placeholder {
    color: white;
    opacity: 1;
    /* Firefox */
}

.small-btn {
    background: #ff6600;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.divider {
    height: 1px;
    background: transparent;
    margin: 20px 0;
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #ff6600;
    border-bottom: 1px solid var(--separator);
}

.control-row:last-child {
    border-bottom: none;
}

.stepper {
    display: flex;
    align-items: center;
    background: rgba(120, 120, 128, 0.12);
    border-radius: 8px;
    padding: 2px;
}

.stepper button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.stepper span {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
}

.label-group {
    display: flex;
    flex-direction: column;
}

.label-group small {
    color: #ffffff;
    font-size: 16px;
    margin-top: 8px;
}

/* iOS Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    /* Standard iOS width */
    height: 31px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E9E9EA;
    transition: .4s;
    border-radius: 31px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

input:checked+.slider {
    background-color: #34C759;
    /* iOS Green */
}

input:checked+.slider:before {
    transform: translateX(20px);
}

/* Result Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.result-card {
    background: #ffb400;
    width: 80%;
    max-width: 300px;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.overlay.hidden .result-card {
    transform: scale(0.8);
}

.winner-text {
    font-size: 32px;
    font-weight: 800;
    margin: 20px 0;
    color: rgb(0, 255, 204);
    word-break: break-word;
}

.secondary-btn {
    background: rgba(120, 120, 128, 0.12);
    border: none;
    padding: 12px 30px;
    border-radius: 20px;
    font-size: 16px;
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 90;
    transition: opacity 0.3s;
}

.backdrop.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Theme Buttons */
.theme-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 16px;
}

.theme-btn {
    border: none;
    border-radius: 10px;
    padding: 15px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;
}

.theme-btn:active {
    transform: scale(0.96);
}

/* Custom Alert */
.alert-card {
    background: #ff3b30;
    /* iOS Red for error/alert */
    box-shadow: 0 10px 30px rgba(255, 59, 48, 0.4);
}

.alert-icon {
    font-size: 48px;
    color: white;
    margin-bottom: 10px;
}

.alert-text {
    font-size: 20px;
    color: white;
    font-weight: 600;
    margin-bottom: 24px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.alert-card .secondary-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.alert-card .secondary-btn:active {
    background: rgba(255, 255, 255, 0.4);
}