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

/* root */
:root {
    color-scheme: light dark;

    /* dark theme */
    --background-d: #090909;
    --correct-d: #538D4E;
    --misplaced-d: #B59F3B;
    --keyboard-d: #818384;
    --active-row-d: #565758;
    --tile-d: #3A3A3C;
    --dialog-d: #121213;

    --background-l: #FFFFFF;
    --correct-l: #6AAA64;
    --misplaced-l: #C9B458;
    --keyboard-l: #D3D6DA;
    --active-row-l: #878A8C;
    --tile-l: #787C7E;
    --dialog-l: #FFFFFF;    
}

/* general */
body {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1050%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(9%2c 9%2c 9%2c 1)'%3e%3c/rect%3e%3cpath d='M560.202387333866 464.9090995949867L605.5224598346425 408.94347092981536 498.91398058649725 368.94617651123616z' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M115.1482507063194 86.40735568604006L27.156242955741135 111.63865789217164 52.38754516187271 199.6306656427499 140.37955291245098 174.39936343661833z' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1238.897624920567 233.15487566409533L1134.8015551963488 306.0437283829965 1311.7864776394683 337.2509453883136z' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M129.664%2c386.54C154.819%2c386.67%2c182.338%2c383.449%2c195.713%2c362.144C209.735%2c339.808%2c206.471%2c309.989%2c191.236%2c288.462C177.898%2c269.614%2c152.754%2c268.966%2c129.664%2c268.814C106.178%2c268.66%2c80.148%2c268.406%2c66.676%2c287.645C51.543%2c309.256%2c50.612%2c339.216%2c64.785%2c361.469C78.135%2c382.429%2c104.814%2c386.412%2c129.664%2c386.54' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M768.087953719585 419.9271424914657L723.4751283159401 336.02262106095554 619.9247588719973 444.8941198816781z' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M744.4123539335109 514.593494035081L773.8249390813153 600.0138437619008 829.8327036603307 485.18090888727653z' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1084.527%2c473.125C1127.07%2c471.714%2c1159.204%2c439.011%2c1180.025%2c401.885C1200.301%2c365.731%2c1210.199%2c322.056%2c1189.337%2c286.237C1168.585%2c250.607%2c1125.76%2c238.003%2c1084.527%2c237.916C1043.111%2c237.829%2c1000.968%2c250.716%2c978.95%2c285.794C955.622%2c322.959%2c955.845%2c370.378%2c977.389%2c408.605C999.327%2c447.531%2c1039.87%2c474.606%2c1084.527%2c473.125' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1375.7655357892738 94.79557489902794L1218.0786733972845 111.21720809661633 1297.569815818456 224.7423246990658z' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M981.942%2c393.274C1021.27%2c394.27%2c1059.055%2c375.531%2c1079.28%2c341.787C1100.069%2c307.102%2c1101.363%2c263.33%2c1080.638%2c228.607C1060.388%2c194.68%2c1021.425%2c180.19%2c981.942%2c178.707C939.097%2c177.098%2c890.545%2c183.316%2c869.511%2c220.677C848.708%2c257.627%2c869.643%2c301.531%2c892.788%2c337.062C913.34%2c368.612%2c944.3%2c392.32%2c981.942%2c393.274' fill='rgba(75%2c 142%2c 28%2c 0.33)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1050'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

h1 {
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

/* board */
#board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 0 auto 15px;
    max-width: 348px;
}

.tile {
    width: 60px;
    height: 60px;
    background-color: light-dark(var(--background-l), var(--background-d));
    border: 2px solid light-dark(var(--tile-l), var(--tile-d));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
}

.enter, .delete {
    grid-column: span 2;
}

/* keyboard */
#keyboard {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    margin-bottom: 15px;
}

.key {
    padding: 10px;
    background-color: light-dark(var(--keyboard-l), var(--keyboard-d));
    border: 2px solid light-dark(var(--keyboard-l), var(--keyboard-d));
    color: white;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
}

.key.disabled {
    cursor: not-allowed;
    pointer-events: none;
}

/* message */
#message {
    font-size: 1.2rem;
}

/* tile states */
.tile.correct, .key.correct {
    background-color: light-dark(var(--correct-l), var(--correct-d));
    border: 2px solid light-dark(var(--correct-l), var(--correct-d));
}

.tile.misplaced, .key.misplaced {
    background-color: light-dark(var(--misplaced-l), var(--misplaced-d));
    border: 2px solid light-dark(var(--misplaced-l), var(--misplaced-d));
}

.tile.incorrect, .key.incorrect {
    background-color: light-dark(var(--tile-l), var(--tile-d));
    border: 2px solid light-dark(var(--tile-l), var(--tile-d));
}

.tile.active {
    border: 2px solid light-dark(var(--active-row-l), var(--active-row-d));
}

/* dialog */
dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: light-dark(var(--dialog-l), var(--dialog-d));
    border: 2px solid transparent;
    padding: 20px;
    color: white;
    font-size: 1.2rem;
}

dialog h2 {
    font-size: 1.5rem;
}

dialog button {
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

#playAgainButton {
    background-color: light-dark(var(--correct-l), var(--correct-d));
}

#trySameWordButton {
    background-color: light-dark(var(--tile-l), var(--tile-d));
}

#playAgainButton:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

#trySameWordButton:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}