/* Reset and base styles */
.true-grit-container * {
    margin: 0;
    padding: 0;
}

.true-grit-container p {
    margin-bottom: 1rem;
}

/* Hand selection buttons */
.hands {
    list-style-type: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hands li {
    display: inline-block;
    list-style-type: none;
}

.hands li .hand-button {
    font-size: 2.5rem;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    margin: 0.25rem;
    cursor: pointer;
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: 8px;
    background: transparent;
    transition: all 0.3s ease;
}

.hands li .hand-button img {
    pointer-events: none;
}

.hands li .hand-button:hover, 
.hands li .hand-button:focus {
    text-decoration: none;
    border-color: #fdb515;
    outline: none;
}

.hands li .hand-button:focus-visible {
    outline: 2px solid #fdb515;
    outline-offset: 2px;
}

.hands li .hand-button.selected {
    background-color: #fdb515;
    border-color: #fdb515;
}

/* True Grit image container */
.true-grit-wrapper {
    position: relative;
    margin: 2rem auto;
    display: block;
    width: 100%;
    max-width: 100%;
}

.true-grit-wrapper .true-grit-image {
    background-image: url("images/true-grit.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: filter 0.3s ease;
}

.true-grit-wrapper::before {
    padding-top: 66.6%;
    display: block;
    content: "";
}

/* Progressive image reveal based on grit level */
.true-grit-wrapper.interval-low .true-grit-image {
    filter: grayscale(75%);
}

.true-grit-wrapper.interval-med .true-grit-image {
    filter: grayscale(50%);
}

.true-grit-wrapper.interval-high .true-grit-image {
    filter: grayscale(25%);
}

.true-grit-wrapper.interval-complete .true-grit-image {
    filter: grayscale(0%);
}

/* Nose button */
button.nose {
    position: absolute;
    width: 30%;
    height: 35%;
    left: 60%;
    top: 33%;
    appearance: none;
    background: transparent;
    border: none;
    pointer-events: auto;
    cursor: url("images/hand-neutral.png") 32 32, pointer;
    transition: all 0.2s ease;
}

button.nose:hover, 
button.nose:focus, 
button.nose:active {
    outline: none;
    background-color: transparent;
}

button.nose:focus-visible {
    outline: 3px solid #ffebbe;
    outline-offset: 2px;
}

/* Hand cursor animations */
.nose:active {
    animation: hand-neutral 300ms infinite;
}

@keyframes hand-neutral {
    0% { cursor: url("images/hand-neutral.png") 32 32, pointer; }
    50% { cursor: url("images/waving-hand-neutral.png") 32 32, pointer; }
}

.nose.hand-l {
    cursor: url("images/hand-light.png") 32 32, pointer;
}

.nose.hand-l:active {
    animation: hand-light 300ms infinite;
}

@keyframes hand-light {
    0% { cursor: url("images/hand-light.png") 32 32, pointer; }
    50% { cursor: url("images/waving-hand-light.png") 32 32, pointer; }
}

.nose.hand-ml {
    cursor: url("images/hand-medium-light.png") 32 32, pointer;
}

.nose.hand-ml:active {
    animation: hand-medium-light 300ms infinite;
}

@keyframes hand-medium-light {
    0% { cursor: url("images/hand-medium-light.png") 32 32, pointer; }
    50% { cursor: url("images/waving-hand-medium-light.png") 32 32, pointer; }
}

.nose.hand-m {
    cursor: url("images/hand-medium.png") 32 32, pointer;
}

.nose.hand-m:active {
    animation: hand-medium 300ms infinite;
}

@keyframes hand-medium {
    0% { cursor: url("images/hand-medium.png") 32 32, pointer; }
    50% { cursor: url("images/waving-hand-medium.png") 32 32, pointer; }
}

.nose.hand-md {
    cursor: url("images/hand-medium-dark.png") 32 32, pointer;
}

.nose.hand-md:active {
    animation: hand-medium-dark 300ms infinite;
}

@keyframes hand-medium-dark {
    0% { cursor: url("images/hand-medium-dark.png") 32 32, pointer; }
    50% { cursor: url("images/waving-hand-medium-dark.png") 32 32, pointer; }
}

.nose.hand-d {
    cursor: url("images/hand-dark.png") 32 32, pointer;
}

.nose.hand-d:active {
    animation: hand-dark 300ms infinite;
}

@keyframes hand-dark {
    0% { cursor: url("images/hand-dark.png") 32 32, pointer; }
    50% { cursor: url("images/waving-hand-dark.png") 32 32, pointer; }
}

/* Touch device specific styles */
body.is-touch * {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body.is-touch .nose:active {
    background-repeat: no-repeat;
    background-position: 80% 30%;
    background-size: 64px;
    background-image: url("images/hand-neutral.png");
    animation: hand-neutral-bg 300ms infinite;
}

@keyframes hand-neutral-bg {
    0% { background-image: url("images/hand-neutral.png"); }
    50% { background-image: url("images/waving-hand-neutral.png"); }
}

body.is-touch .nose.hand-l:active {
    background-image: url("images/hand-light.png");
    animation: hand-light-bg 300ms infinite;
}

@keyframes hand-light-bg {
    0% { background-image: url("images/hand-light.png"); }
    50% { background-image: url("images/waving-hand-light.png"); }
}

body.is-touch .nose.hand-ml:active {
    background-image: url("images/hand-medium-light.png");
    animation: hand-medium-light-bg 300ms infinite;
}

@keyframes hand-medium-light-bg {
    0% { background-image: url("images/hand-medium-light.png"); }
    50% { background-image: url("images/waving-hand-medium-light.png"); }
}

body.is-touch .nose.hand-m:active {
    background-image: url("images/hand-medium.png");
    animation: hand-medium-bg 300ms infinite;
}

@keyframes hand-medium-bg {
    0% { background-image: url("images/hand-medium.png"); }
    50% { background-image: url("images/waving-hand-medium.png"); }
}

body.is-touch .nose.hand-md:active {
    background-image: url("images/hand-medium-dark.png");
    animation: hand-medium-dark-bg 300ms infinite;
}

@keyframes hand-medium-dark-bg {
    0% { background-image: url("images/hand-medium-dark.png"); }
    50% { background-image: url("images/waving-hand-medium-dark.png"); }
}

body.is-touch .nose.hand-d:active {
    background-image: url("images/hand-dark.png");
    animation: hand-dark-bg 300ms infinite;
}

@keyframes hand-dark-bg {
    0% { background-image: url("images/hand-dark.png"); }
    50% { background-image: url("images/waving-hand-dark.png"); }
}

/* Typography and layout */
h3.true-grit-steps {
    font-size: 0.9rem;
    text-transform: uppercase;
    margin: 0;
    font-weight: 500;
    color: #333;
}

/* Typography and layout */
h2.true-grit-steps {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 1rem;
}

p.true-grit-directions {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Grit level display */
.grit-level-wrapper {
    background-color: #404040;
    padding: 1rem 2rem;
    text-align: center;
    border-radius: 8px;
    margin: 1rem 0;
}

.grit-level-wrapper .gritometer-title {
    font-size: clamp(1.2rem, 4vw, 2rem);
    margin-top: 0;
    margin-bottom: 1rem;
    color: #fdb515;
}

.gritometer-wrapper {
    height: 2rem;
    border-radius: 2rem;
    margin: 1rem 0;
    overflow: hidden;
    background-color: white;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.gritometer-progress {
    width: 0%;
    max-width: 100%;
    background-color: #fdb515;
    height: 100%;
    transition: width 0.3s ease;
    background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

/* Grit level text colors */
.grit-level {
    color: #eee;
    transition: color 0.3s ease;
}

.grit-level.grit-level-small {
    color: #eee;
}

.grit-level.grit-level-medium {
    color: #fff;
}

.grit-level.grit-level-large {
    color: #fff;
}

.grit-level.grit-level-full {
    color: #fdb515;
    font-weight: bold;
}

/* Confetti canvas */
#umbc-confetti {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9999;
}

/* Win message */
.win {
    background-color: #fdb515;
    color: #000;
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
    margin: 1rem 0;
    font-size: 1.2rem;
}

.win.hidden {
    display: none;
}

/* Layout columns */
.columns {
    display: block;
    margin-left: 0;
}

.columns .col {
    margin: 1rem 0;
}

@media (min-width: 768px) {
    .columns {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .columns .col {
        flex: 1;
        margin: 0;
        min-width: 300px;
    }
}

/* Responsive improvements */
@media (max-width: 480px) {
    .hands {
        justify-content: center;
    }
    
    .hands li .hand-button {
        font-size: clamp(1.2rem, 6vw, 2rem);
        padding: 0.75rem;
    }
    
    .grit-level-wrapper {
        padding: 0.75rem 1rem;
    }
}