/* Custom styles for Clueless - The Reverse Crossword Challenge */

/* CSS Custom Properties for responsive scaling */
:root {
    --font-scale: 1;
    --touch-target-min: 44px;
    --grid-cell-size: 2rem;
    --letter-btn-size: 3rem;
}

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Enhanced zoom support */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: calc(16px * var(--font-scale));
}

/* Prevent layout breaks on zoom */
* {
    box-sizing: border-box;
}

.container {
    max-width: 100%;
    overflow-x: auto;
}

.navbar {
    height: 5rem;
}

/* Scalable components */
.scalable-text {
    font-size: calc(1rem * var(--font-scale));
}

.scalable-button {
    min-width: calc(var(--touch-target-min) * var(--font-scale));
    min-height: calc(var(--touch-target-min) * var(--font-scale));
}

/* Grid cell styling */
.grid-cell {
    @apply w-8 h-8 flex items-center justify-center text-sm font-bold;
    @apply focus:ring-2 focus:ring-primary focus:outline-none;
    @apply transition-colors duration-200;
    @apply bg-base-100 text-base-content;
    border: 1px solid hsl(var(--bc) / 0.2);
    margin: -0.5px;
    /* Overlap borders to prevent double thickness */
    place-content: center;
    text-align: center;
}

.grid-cell.black {
    @apply bg-neutral text-neutral-content;
    border-color: hsl(var(--bc) / 0.3);
}

.grid-cell.white {
    @apply bg-base-100 text-base-content;
    border-color: hsl(var(--bc) / 0.3);
    background-color: wheat
}

.grid-cell.revealed {
    @apply bg-success text-success-content;
    border-color: hsl(var(--su) / 0.8);
    font-weight: 700;
}

.grid-cell.star {
    @apply relative;
}

.grid-cell.star::after {
    content: '⭐';
    @apply absolute -top-1 -right-1 text-xs;
}

/* Letter button styling */
.letter-btn {
    @apply btn btn-outline btn-lg min-w-12 h-12;
    @apply focus:ring-2 focus:ring-primary;
    @apply transition-all duration-200;
}

.letter-btn:hover {
    @apply scale-105;
}

.letter-btn.selected {
    @apply btn-primary;
}

.letter-btn:disabled {
    @apply btn-disabled opacity-50;
}

/* Word area letter styling */
.selected-letter {
    @apply btn btn-primary btn-sm cursor-pointer;
    @apply focus:ring-2 focus:ring-primary-focus;
    @apply transition-all duration-200;
}

.selected-letter:hover {
    @apply btn-primary-focus;
}

/* Custom grid layout for 15 columns */
.grid-cols-15 {
    grid-template-columns: repeat(15, minmax(0, 1fr));
}

/* Grid container styling */
#crossword-grid {
    border: 2px solid hsl(var(--bc) / 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: hsl(var(--b2));
    gap: 0;
    /* Remove gap to prevent overlapping with borders */
}

.card-body {
    padding: 2px;
}

/* Responsive adjustments with accessibility optimization */
@media (max-width: 640px) {
    .grid-cell {
        @apply w-7 h-7 text-xs;
        min-width: 28px;
        min-height: 28px;
        border: 1px solid hsl(var(--bc) / 0.2);
        margin: -0.5px;
    }

    .letter-btn {
        @apply btn-md;
        min-width: 44px;
        min-height: 44px;
        font-size: 1rem;
    }

    .selected-letter {
        min-width: 44px;
        min-height: 44px;
    }

    /* Ensure touch targets meet accessibility guidelines */
    button,
    .btn,
    [role="button"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Optimize spacing for mobile */
    .card-body {
        @apply p-0;
    }

    .gap-2 {
        @apply gap-3;
    }
}

@media (max-width: 480px) {
    .grid-cell {
        @apply w-6 h-6 text-xs;
        min-width: 24px;
        min-height: 24px;
        border: 1px solid hsl(var(--bc) / 0.2);
        margin: -0.5px;
    }

    .letter-btn {
        @apply btn-sm;
        min-width: 44px;
        min-height: 44px;
        font-size: 0.875rem;
    }

    /* Smaller grid for very small screens */
    .mobile-grid {
        @apply max-w-xs;
        transform: scale(0.9);
        transform-origin: center;
    }

    /* Adjust container padding */
    .container {
        @apply px-2;
    }
}

/* Tablet responsive adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    .grid-cell {
        @apply w-8 h-8 text-sm;
        min-width: 32px;
        min-height: 32px;
        border: 1px solid hsl(var(--bc) / 0.2);
        margin: -0.5px;
    }

    .letter-btn {
        @apply btn-lg;
        min-width: 48px;
        min-height: 48px;
    }
}

/* Large screen optimizations */
@media (min-width: 1025px) {
    .grid-cell {
        @apply w-10 h-10 text-base;
        min-width: 40px;
        min-height: 40px;
        border: 1px solid hsl(var(--bc) / 0.2);
        margin: -0.5px;
    }

    .letter-btn {
        @apply btn-lg;
        min-width: 52px;
        min-height: 52px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .grid-cell {
        border: 2px solid hsl(var(--bc));
        margin: -1px;
    }

    .grid-cell.revealed {
        border: 2px solid hsl(var(--su));
        background-color: hsl(var(--su) / 0.9);
        color: hsl(var(--suc));
    }

    .grid-cell.black {
        border: 2px solid hsl(var(--bc));
        background-color: hsl(var(--n));
        color: hsl(var(--nc));
    }
}

/* Reduced motion support with enhanced accessibility */
@media (prefers-reduced-motion: reduce) {

    .letter-btn,
    .selected-letter,
    .grid-cell,
    .score-increase,
    .bonus-points,
    .loading-game,
    .toast,
    .modal {
        @apply transition-none;
        animation: none !important;
        transform: none !important;
    }

    .letter-btn:hover {
        @apply scale-100;
    }

    /* Provide alternative feedback for reduced motion */
    .letter-btn:hover,
    .letter-btn:focus {
        @apply ring-2 ring-primary ring-offset-2;
        background-color: hsl(var(--p) / 0.1);
    }

    .grid-cell:hover,
    .grid-cell:focus {
        @apply ring-2 ring-primary ring-offset-1;
        background-color: hsl(var(--b2));
    }

    /* Static feedback for score changes */
    .score-increase {
        @apply text-success font-bold;
    }

    .bonus-points {
        @apply text-warning font-bold;
    }
}

/* Focus indicators for better accessibility */
.btn:focus-visible,
.grid-cell:focus-visible {
    @apply ring-2 ring-primary ring-offset-2 ring-offset-base-100;
}

/* Loading state */
.loading-game {
    @apply loading loading-spinner loading-lg text-primary;
}

/* High contrast mode enhancements */
.high-contrast .grid-cell {
    border: 2px solid #000000;
    margin: -1px;
    background-color: #ffffff;
    color: #000000;
}

.high-contrast .grid-cell.revealed {
    background-color: #00ff00;
    color: #000000;
    border: 2px solid #000000;
}

.high-contrast .grid-cell.black {
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #000000;
}

.high-contrast .letter-btn {
    @apply border-2 border-black text-black;
}

.high-contrast .letter-btn.selected {
    @apply bg-black text-white border-black;
}

/* Mobile grid adjustments with swipe support */
.mobile-grid .grid-cell {
    @apply w-5 h-5 text-xs;
    touch-action: manipulation;
}

.mobile-grid {
    @apply max-w-xs;
    touch-action: manipulation;
    user-select: none;
}

/* Swipe gesture support */
.swipe-container {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.swipe-hint {
    @apply text-xs text-base-content/60 text-center mt-2;
}

/* Enhanced touch targets for accessibility */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zoom support for accessibility */
@media (max-width: 640px) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Ensure content scales properly with zoom */
    .container {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Prevent horizontal scroll on zoom */
    body {
        overflow-x: hidden;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 896px) and (orientation: landscape) {
    .grid.lg\\:grid-cols-2 {
        @apply grid-cols-2 gap-4;
    }

    .card-body {
        @apply p-0;
    }

    .navbar {
        @apply py-2;
    }

    /* Compact layout for landscape mobile */
    .mobile-landscape .grid-cell {
        @apply w-4 h-4 text-xs;
        min-width: 20px;
        min-height: 20px;
    }
}

/* Toast notifications positioning */
.toast {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}

/* Modal accessibility improvements */
.modal[aria-modal="true"] {
    @apply backdrop-blur-sm;
}

.modal-box {
    @apply focus:outline-none;
}

/* Difficulty selection styling */
.difficulty-btn {
    @apply transition-all duration-200;
}

.difficulty-btn:hover {
    @apply scale-105 shadow-lg;
}

.difficulty-btn:focus {
    @apply ring-2 ring-primary ring-offset-2;
}

.difficulty-btn[data-difficulty="easy"]:hover {
    @apply border-success bg-success/10;
}

.difficulty-btn[data-difficulty="medium"]:hover {
    @apply border-warning bg-warning/10;
}

.difficulty-btn[data-difficulty="hard"]:hover {
    @apply border-error bg-error/10;
}



/* Enhanced animation feedback with accessibility */
.score-increase {
    @apply text-success font-bold;
    animation: scoreIncrease 1s ease-in-out;
    position: relative;
}

.bonus-points {
    @apply text-warning font-bold;
    animation: bonusPoints 2s ease-in-out;
    position: relative;
}

/* Letter selection animations */
.letter-selecting {
    animation: letterSelect 0.3s ease-out;
    transform-origin: center;
}

.letter-deselecting {
    animation: letterDeselect 0.2s ease-in;
}

/* Word revelation animations */
.word-revealing {
    animation: wordReveal 0.8s ease-out;
}

.word-revealed {
    animation: wordRevealed 0.5s ease-out;
}

/* Star movement animation */
.star-moving {
    animation: starMove 1s ease-in-out;
}

.star-appeared {
    animation: starAppear 0.6s ease-out;
}

/* Grid cell animations */
.cell-revealing {
    animation: cellReveal 0.4s ease-out;
}

.cell-highlighted {
    animation: cellHighlight 0.3s ease-in-out;
}

/* Keyframe definitions */
@keyframes scoreIncrease {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.1);
        filter: brightness(1.2);
        text-shadow: 0 0 8px currentColor;
    }

    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes bonusPoints {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }

    25% {
        transform: scale(1.05) rotate(1deg);
        filter: brightness(1.1);
    }

    50% {
        transform: scale(1.1) rotate(-1deg);
        filter: brightness(1.2);
        text-shadow: 0 0 12px currentColor;
    }

    75% {
        transform: scale(1.05) rotate(1deg);
        filter: brightness(1.1);
    }
}

@keyframes letterSelect {
    0% {
        transform: scale(1);
        background-color: hsl(var(--b1));
    }

    50% {
        transform: scale(1.1);
        background-color: hsl(var(--p) / 0.2);
    }

    100% {
        transform: scale(1);
        background-color: hsl(var(--p));
    }
}

@keyframes letterDeselect {
    0% {
        transform: scale(1);
        background-color: hsl(var(--p));
    }

    50% {
        transform: scale(0.9);
        background-color: hsl(var(--b2));
    }

    100% {
        transform: scale(1);
        background-color: hsl(var(--b1));
    }
}

@keyframes wordReveal {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05) translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes wordRevealed {
    0% {
        background-color: hsl(var(--su) / 0.3);
        transform: scale(1);
    }

    50% {
        background-color: hsl(var(--su) / 0.6);
        transform: scale(1.02);
        box-shadow: 0 0 16px hsl(var(--su) / 0.4);
    }

    100% {
        background-color: hsl(var(--su));
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes starMove {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }

    25% {
        transform: scale(1.2) rotate(90deg);
        opacity: 0.8;
    }

    50% {
        transform: scale(0.8) rotate(180deg);
        opacity: 0.4;
    }

    75% {
        transform: scale(1.1) rotate(270deg);
        opacity: 0.6;
    }

    100% {
        transform: scale(1) rotate(360deg);
        opacity: 0;
    }
}

@keyframes starAppear {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.3) rotate(180deg);
        opacity: 0.8;
        filter: brightness(1.5);
    }

    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes cellReveal {
    0% {
        background-color: hsl(var(--b1));
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        background-color: hsl(var(--su) / 0.3);
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        background-color: hsl(var(--su));
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes cellHighlight {

    0%,
    100% {
        box-shadow: 0 0 0 2px transparent;
    }

    50% {
        box-shadow: 0 0 0 2px hsl(var(--p));
    }
}

/* Loading animations */
.loading-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.loading-fade-out {
    animation: fadeOut 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Performance mode optimizations */
.performance-mode * {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
}

.performance-mode .letter-btn:hover {
    transform: none !important;
}

.performance-mode .score-increase,
.performance-mode .bonus-points {
    animation: none !important;
    background-color: hsl(var(--su) / 0.2) !important;
    border: 1px solid hsl(var(--su)) !important;
}

/* Memory-efficient alternatives */
.performance-mode .grid-cell {
    box-shadow: none !important;
}

.performance-mode .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure sufficient color contrast */
@media (prefers-contrast: high) {
    :root {
        --primary: #000000;
        --primary-content: #ffffff;
        --secondary: #333333;
        --secondary-content: #ffffff;
        --accent: #666666;
        --accent-content: #ffffff;
        --neutral: #000000;
        --neutral-content: #ffffff;
        --base-100: #ffffff;
        --base-200: #f0f0f0;
        --base-300: #e0e0e0;
        --base-content: #000000;
    }
}

/* Comprehensive reduced motion alternatives */
@media (prefers-reduced-motion: reduce) {

    /* Disable all animations */
    .score-increase,
    .bonus-points,
    .letter-selecting,
    .letter-deselecting,
    .word-revealing,
    .word-revealed,
    .star-moving,
    .star-appeared,
    .cell-revealing,
    .cell-highlighted,
    .loading-fade-in,
    .loading-fade-out {
        animation: none !important;
        transition: none !important;
    }

    /* Provide static visual feedback instead */
    .score-increase {
        @apply text-success font-bold;
        background-color: hsl(var(--su) / 0.1);
        border: 2px solid hsl(var(--su));
        border-radius: 0.25rem;
        padding: 0.125rem 0.25rem;
    }

    .bonus-points {
        @apply text-warning font-bold;
        background-color: hsl(var(--wa) / 0.1);
        border: 2px solid hsl(var(--wa));
        border-radius: 0.25rem;
        padding: 0.125rem 0.25rem;
    }

    /* Static feedback for letter selection */
    .letter-selecting,
    .letter-btn.selected {
        background-color: hsl(var(--p)) !important;
        border: 3px solid hsl(var(--pf)) !important;
        box-shadow: 0 0 0 2px hsl(var(--p) / 0.3) !important;
    }

    /* Static feedback for word revelation */
    .word-revealed,
    .cell-revealing {
        background-color: hsl(var(--su)) !important;
        border: 2px solid hsl(var(--suf)) !important;
        font-weight: bold !important;
    }

    /* Static feedback for star */
    .star-appeared::after {
        content: '⭐';
        font-size: 1.2em;
        filter: brightness(1.3);
        text-shadow: 0 0 4px hsl(var(--wa));
    }

    /* Enhanced focus indicators for reduced motion */
    .grid-cell:focus,
    .letter-btn:focus,
    .btn:focus {
        outline: 3px solid hsl(var(--p)) !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 5px hsl(var(--p) / 0.2) !important;
    }

    /* Disable all keyframe animations */
    @keyframes scoreIncrease {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes bonusPoints {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes letterSelect {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes letterDeselect {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes wordReveal {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes wordRevealed {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes starMove {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes starAppear {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes cellReveal {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes cellHighlight {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes fadeIn {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
    @keyframes fadeOut {
        0%, 100% { transform: none; opacity: 1; filter: none; }
    }
}