/* ===========================
   CSS Variables
   =========================== */
   :root {
    /* Colors */
    --color-black: #000;
    --color-white: #fff;
    --color-gradient-1: #3b001d;
    --color-gradient-2: #000000;
    --color-gradient-3: #2c003b;
    
    /* Sharp (#) gradient colors */
    --color-sharp-top-1: #f29f61;
    --color-sharp-top-2: #f29761;
    --color-sharp-bottom-1: #f17e61;
    --color-sharp-bottom-2: #f17560;
    --color-sharp-vertical-1: #F3B562;
    --color-sharp-vertical-2: #F06060;
    
    /* Spacing */
    --spacing-small: 10px;
    --spacing-medium: 20px;
    --spacing-large: 40px;
    
    /* Dimensions */
    --letter-container-size: 200px;
    --game-cell-size: 70px;
    --game-cell-offset: -15px;
    --game-cell-spacing: 80px;
    
    /* Border radius */
    --radius-small: 10px;
    --radius-medium: 20px;
    --radius-large: 100px;
    --radius-xlarge: 140px;
  }
  
  /* ===========================
     Reset & Base Styles
     =========================== */
  * {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(-45deg, var(--color-gradient-1), var(--color-gradient-2), var(--color-gradient-2), var(--color-gradient-3));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }
  
  /* ===========================
     Animations
     =========================== */
  @keyframes gradient {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  
  /* ===========================
     Utility Classes
     =========================== */
  .no-select {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* ===========================
     Layout Components
     =========================== */
  .flex-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .letter-container {
    position: relative;
    width: var(--letter-container-size);
    height: var(--letter-container-size);
    display: flex;
    justify-content: center;
    box-sizing: content-box;
    margin: var(--spacing-small);
    border: 2px solid transparent;
    border-radius: var(--radius-medium);
  }
  
  /* ===========================
     Letter C Styles
     =========================== */
  #C {
    position: absolute;
    top: 0;
    left: 20px;
    width: 90px;
    height: 120px;
    border-top: var(--spacing-large) solid transparent;
    border-left: var(--spacing-large) solid transparent;
    border-bottom: var(--spacing-large) solid transparent;
  }
  
  /* C letter top cap */
  #C2-top {
    position: absolute;
    width: var(--spacing-medium);
    height: var(--spacing-large);
    top: calc(var(--spacing-large) * -1);
    left: 89px;
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    background: var(--color-white);
  }
  
  /* C letter bottom cap */
  #C2-bottom {
    position: absolute;
    width: var(--spacing-medium);
    height: var(--spacing-large);
    top: 120px;
    left: 89px;
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    background: var(--color-white);
  }
  
  /* C letter white body */
  #C2-white {
    position: absolute;
    width: 140px;
    height: var(--letter-container-size);
    top: calc(var(--spacing-large) * -1);
    left: calc(var(--spacing-large) * -1);
    border-radius: var(--radius-xlarge) 0 0 var(--radius-xlarge);
    background: var(--color-white);
  }
  
  /* C letter black inner curve */
  #C2-black {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 120px;
    background: var(--color-black);
    border-radius: var(--radius-large) 0 0 var(--radius-large);
  }
  
  /* ===========================
     Sharp (#) Symbol Styles
     =========================== */
  /* Horizontal bars */
  #Sharp2-top {
    position: absolute;
    width: var(--letter-container-size);
    height: var(--spacing-medium);
    top: 50px;
    left: 0;
    border-radius: var(--radius-small);
    background: linear-gradient(to bottom, var(--color-sharp-top-1), var(--color-sharp-top-2));
  }
  
  #Sharp2-bottom {
    position: absolute;
    width: var(--letter-container-size);
    height: var(--spacing-medium);
    top: 130px;
    left: 0;
    border-radius: var(--radius-small);
    background: linear-gradient(to bottom, var(--color-sharp-bottom-1), var(--color-sharp-bottom-2));
  }
  
  /* Vertical bars */
  #Sharp2-left,
  #Sharp2-right {
    position: absolute;
    width: var(--spacing-medium);
    height: var(--letter-container-size);
    border-radius: var(--radius-small);
    background: linear-gradient(to bottom, var(--color-sharp-vertical-1), var(--color-sharp-vertical-2));
  }
  
  #Sharp2-left {
    left: 50px;
  }
  
  #Sharp2-right {
    left: 130px;
  }
  
  /* ===========================
     Game Board Grid
     =========================== */
  .game-cell {
    position: absolute;
    width: var(--game-cell-size);
    height: var(--game-cell-size);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Center row */
  #center-center {
    left: 65px;
    top: 65px;
  }
  
  #left-center {
    left: var(--game-cell-offset);
    top: 65px;
  }
  
  #right-center {
    left: 145px;
    top: 65px;
  }
  
  /* Top row */
  #center-top {
    left: 65px;
    top: var(--game-cell-offset);
  }
  
  #left-top {
    left: var(--game-cell-offset);
    top: var(--game-cell-offset);
  }
  
  #right-top {
    left: 145px;
    top: var(--game-cell-offset);
  }
  
  /* Bottom row */
  #center-bottom {
    left: 65px;
    top: 145px;
  }
  
  #left-bottom {
    left: var(--game-cell-offset);
    top: 145px;
  }
  
  #right-bottom {
    left: 145px;
    top: 145px;
  }
  
  /* ===========================
     Media Queries
     =========================== */
  @media (max-width: 768px) {
    :root {
      --letter-container-size: 150px;
      --game-cell-size: 52px;
      --game-cell-offset: -11px;
    }
    
    .letter-container {
      margin: 5px;
    }
    
    /* Adjust C letter for mobile */
    #C {
      left: 15px;
      width: 68px;
      height: 90px;
      border-width: 30px;
    }
    
    #C2-top,
    #C2-bottom {
      width: 15px;
      height: 30px;
    }
    
    #C2-top {
      top: -30px;
      left: 67px;
    }
    
    #C2-bottom {
      top: 90px;
      left: 67px;
    }
    
    #C2-white {
      width: 105px;
      height: 150px;
      top: -30px;
      left: -30px;
      border-radius: 105px 0 0 105px;
    }
    
    #C2-black {
      width: 83px;
      height: 90px;
      border-radius: 75px 0 0 75px;
    }
    
    /* Adjust Sharp for mobile */
    #Sharp2-top,
    #Sharp2-bottom {
      height: 15px;
      width: 150px;
    }
    
    #Sharp2-top {
      top: 38px;
    }
    
    #Sharp2-bottom {
      top: 98px;
    }
    
    #Sharp2-left,
    #Sharp2-right {
      width: 15px;
      height: 150px;
    }
    
    #Sharp2-left {
      left: 38px;
    }
    
    #Sharp2-right {
      left: 98px;
    }
    
    /* Adjust game cells for mobile */
    #center-center {
      left: 49px;
      top: 49px;
    }
    
    #left-center {
      top: 49px;
    }
    
    #right-center {
      left: 109px;
      top: 49px;
    }
    
    #center-top {
      left: 49px;
    }
    
    #right-top {
      left: 109px;
    }
    
    #center-bottom {
      left: 49px;
      top: 109px;
    }
    
    #left-bottom {
      top: 109px;
    }
    
    #right-bottom {
      left: 109px;
      top: 109px;
    }
  }