[bracket] rename

1 files changed, 945 insertions, 0 deletions

diff --git a/static/bv/tutorial/tutorial.css b/static/bv/tutorial/tutorial.css
new file mode 100644
index 0000000..4f2aff0
--- /dev/null
+++ b/static/bv/tutorial/tutorial.css
@@ -0,0 +1,945 @@
+/* ===================
+   Root Variables and Resets
+   =================== */
+   :root {
+    --main-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --highlight-color: #fefcbf;
+  }
+  
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+  
+  /* ===================
+     Container Structure
+     =================== */
+  .puzzle-container {
+    width: 100%;
+    margin: 0 auto;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.5rem;
+    background: white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  @media (min-width: 1024px) {
+    .puzzle-container {
+      max-width: 42rem;
+    }
+  }
+  
+  /* ===================
+     Header Styles
+     =================== */
+  /* Header Base Styles */
+  .puzzle-header {
+    background: white;
+    border-bottom: 1px solid #e2e8f0;
+    box-sizing: border-box;
+    padding: 0.6rem;
+    position: relative; /* Desktop default */
+    text-align: center;
+    z-index: 10;
+  }
+
+  /* Mobile-specific header styles */
+  @media (max-width: 640px) {
+    .puzzle-header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+      padding: max(0.4rem, env(safe-area-inset-top));
+    }
+  }
+
+  /* Header title */
+  .puzzle-header h1 {
+    margin: 0 0 0.5rem 0;
+    text-align: center;
+    font-size: clamp(2rem, 8vw, 3rem);
+    cursor: pointer;
+    font-family: var(--main-font);
+    font-variant: small-caps;
+    color: #1a202c;
+    font-weight: 600;
+  }
+
+  @media (max-width: 640px) {
+    .puzzle-header h1 {
+      margin: 0;
+      font-size: clamp(1.8rem, 7vw, 2.8rem);
+    }
+  }
+
+  /* Help button */
+  .puzzle-header .exit-button {
+    position: absolute;
+    top: 10px;
+    right: 20px;
+    background: none;
+    border: 2px solid #333;
+    border-radius: 50%;
+    width: 2.4rem;
+    height: 2.4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 1.2rem;
+    color: #333;
+  }
+
+  @media (max-width: 640px) {
+    .puzzle-header .exit-button {
+      right: 10px;
+    }
+  }
+
+  /* Navigation container */
+  .puzzle-header .nav-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+  }
+
+  /* Navigation buttons */
+  .puzzle-header .nav-button {
+    padding: 4px 12px;
+    border: none;
+    border-radius: 4px;
+    background: none;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 1.5rem;
+    color: #333;
+  }
+
+  .puzzle-header .nav-button:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  /* Puzzle date */
+  .puzzle-header .puzzle-date {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    font-family: var(--main-font);
+    font-variant: small-caps;
+    color: #1a202c;
+  }
+  
+  /* ===================
+     Main Content Area
+     =================== */
+  /* New rules for loading state */
+  
+  .loading {
+    text-align: center;
+    padding: 2rem;
+  }
+
+  .puzzle-content {
+    padding: 0rem 1rem 1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0rem;
+    width: 100%;
+  }
+  
+  /* ===================
+     Puzzle Display
+     =================== */
+  .puzzle-display {
+    width: 100%;
+    min-height: 40vh;
+    max-height: 60vh;
+    background: #f1f5f9;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    font-family: var(--mono-font);
+    font-size: 24px;
+    line-height: 1.5;
+    overflow-y: auto;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+    hyphens: none;
+    transition: all 0.3s ease;
+  }
+  
+  .puzzle-display.completed {
+    min-height: auto;
+    max-height: none;
+    height: auto;
+  }
+  
+  /* ===================
+     Active Clue & Mark Styles
+     =================== */
+  .active-clue {
+    background-color: rgba(255, 255, 0, 0.2);
+    border-radius: 3px;
+    padding: 2px 4px;
+    margin: -2px -4px;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+  }
+  
+  .active-clue:hover {
+    background-color: rgba(255, 255, 0, 0.3);
+  }
+  
+  mark.solved {
+    background-color: rgba(0, 255, 0, 0.2);
+    border-radius: 3px;
+    padding: 2px 4px;
+    margin: -2px -4px;
+  }
+  
+  mark {
+    background-color: transparent;
+    color: inherit;
+  }
+  
+  /* ===================
+     Input Styles
+     =================== */
+  .input-container {
+    width: 100%;
+    margin: 10px 0 0 0;
+    position: relative;
+  }
+  
+  .answer-input {
+    width: 100%;
+    padding: 16px;
+    font-size: 16px !important;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    margin-bottom: 0px;
+    box-sizing: border-box;
+    font-family: var(--mono-font);
+  }
+  
+  /* ===================
+     Message Styles
+     =================== */
+  .message {
+    padding: 0.5rem;
+    margin: 0.5rem 0;
+    border-radius: 0.375rem;
+    text-align: center;
+    font-family: var(--mono-font);
+    display: none;
+  }
+  
+  .message.success {
+    background-color: #c6f6d5;
+    color: #1a202c;
+    overflow-wrap: anywhere;
+    font-size: 1.2rem;
+    display: block;
+    padding: 20px;
+    line-height: 2rem;
+  }
+
+  .message.success .completion-link {
+    color: #2563eb;
+    text-decoration: underline;
+  }
+  
+  .message.error {
+    background-color: #fee2e2;
+    color: #ef4444;
+    display: block;
+  }
+  
+  /* ===================
+     Completion Message
+     =================== */
+  .completion-message {
+    margin: 0.5rem 0;
+    padding: 0rem;
+    border-radius: 0.375rem;
+    text-align: center;
+    font-family: var(--mono-font);
+    font-size: 1.2rem;
+    line-height: 1.5;
+  }
+  
+  /* ===================
+     Solved Expressions
+     =================== */
+  .solved-expressions {
+    margin-top: 0rem;
+  }
+  
+  .solved-expressions h3 {
+    font-size: 1.2rem;
+    font-weight: 500;
+    margin-bottom: 0.75rem;
+    font-family: var(--main-font);
+    color: #1a202c;
+  }
+  
+  .expression-item {
+    background: #f1f5f9;
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    margin-bottom: 0.5rem;
+    font-size: 1.2rem;
+    font-family: var(--mono-font);
+    line-height: 1.5;
+  }
+  
+  .expression-item .solution {
+    font-weight: 600;
+    color: #1a202c;
+  }
+  
+  
+  /* ===================
+     Stats & Completion
+     =================== */
+  .stats-content {
+    margin-top: 0rem;
+  }
+  
+  .stat-items {
+    margin: 0.5rem 0;
+  }
+
+  .stat-item {
+    background: #f1f5f9;
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    font-family: var(--main-font);
+  }
+  
+  /* ===================
+     Share Button Styles
+     =================== */
+  .share-buttons {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .share-button {
+    width: 100%;
+    padding: 0.75rem;
+    font-size: 1rem;
+    font-family: var(--main-font);
+    background: #1a202c;
+    color: white;
+    border: none;
+    border-radius: 0.375rem;
+    cursor: pointer;
+  }
+
+  .share-button.reset {
+    background-color: #ff4444;
+  }
+  
+  .share-button:hover {
+    background: #2d3748;
+  }
+  
+  .share-message {
+    font-family: var(--main-font);
+    color: #1a202c;
+    text-align: center;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    background: var(--highlight-color);
+    border-radius: 0.375rem;
+  }
+  
+  /* ===================
+     Rank Display
+     =================== */
+  .rank-display {
+    font-family: var(--mono-font);
+    position: relative;
+    overflow: hidden;
+    padding: 1rem;
+    text-align: center;
+    font-size: 1.2em;
+    font-weight: 500;
+    border-radius: 0.375rem;
+    margin: 0rem 0rem 1rem 0rem;
+    border: 1px solid rgba(255,255,255,0.4);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    cursor: pointer;
+    transition: transform 0.2s;
+    user-select: none;
+  }
+
+  .rank-display:active {
+    transform: scale(0.95);
+  }
+  .rank-display .next-rank {
+    font-size: 0.8em;
+    font-weight: normal;
+  }
+
+  .rank-display .share-hint {
+    font-size: 0.7em;
+    margin-top: 0.5em;
+    color: #666;
+  }
+  
+  /* Rank gradients */
+  .rank-display[data-rank="Tourist"] { background: linear-gradient(135deg, #f0fdf4 0%, #6ee7b7 100%); }
+  .rank-display[data-rank="Commuter"] { background: linear-gradient(135deg, #fff7ed 0%, #fbd38d 100%); }
+  .rank-display[data-rank="Resident"] { background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%); }
+  .rank-display[data-rank="Council Member"] { background: linear-gradient(135deg, #fafaf9 0%, #d6d3d1 100%); }
+  .rank-display[data-rank="Chief of Police"] { background: linear-gradient(135deg, #f0f9ff 0%, #93c5fd 100%); }
+  .rank-display[data-rank="Mayor"] { background: linear-gradient(135deg, #fff1f2 0%, #fda4af 100%); }
+  .rank-display[data-rank="Power Broker"] { background: linear-gradient(135deg, #fefce8 0%, #92400e 100%); }
+  .rank-display[data-rank="Kingmaker"] { background: linear-gradient(135deg, #fffbeb 0%, #fcd34d 100%); }
+  .rank-display[data-rank="Puppet Master"] { background: linear-gradient(135deg, #faf5ff 0%, #d8b4fe 100%); }
+  
+  /* ===================
+     Shimmer Animation
+     =================== */
+  @keyframes shimmer {
+    0% { transform: translateX(-150%) rotate(45deg); }
+    100% { transform: translateX(150%) rotate(45deg); }
+  }
+  
+  .rank-display::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    left: -100%;
+    width: 300%;
+    height: 200%;
+    background: linear-gradient(
+      to bottom right,
+      rgba(255,255,255,0) 0%,
+      rgba(255,255,255,0.3) 50%,
+      rgba(255,255,255,0) 100%
+    );
+    transform: rotate(45deg);
+    animation: shimmer 4s infinite linear;
+    pointer-events: none;
+  }
+  
+  /* ===================
+     Mobile Styles
+     =================== */
+  @media (max-width: 640px) {
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100vh;
+      font-size: 14px;
+      overflow: hidden;
+    }
+  
+    .message.success {
+      background-color: #c6f6d5;
+      color: #1a202c;
+      overflow-wrap: anywhere;
+      font-size: 1rem;
+      display: block;
+      padding: 10px;
+      line-height: 1.4rem;
+      margin-top: 0.2rem;
+    }
+  
+    /* Mobile container setup */
+    .puzzle-container {
+      height: 100vh;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+    }
+  
+    /* Mobile content area */
+    .puzzle-content {
+      position: absolute;
+      top: 70px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      padding: 0;
+      gap: 0rem;
+    }
+    
+    @font-face {
+      font-family: 'CustomMono';
+      /* Use ui-monospace for every character except underscore */
+      src: local("ui-monospace");
+      /* All Unicode except underscore (U+005F) */
+      unicode-range: U+0000-005E, U+0060-10FFFF;
+    }
+    
+    @font-face {
+      font-family: 'CustomMono';
+      /* Use Menlo for underscore only */
+      src: local("Menlo");
+      unicode-range: U+005F;
+    }
+
+    .puzzle-display {
+      height: 155px;
+      padding: 0.5rem 1rem 1rem 1rem;
+      margin: 0;
+      font-size: 1.2rem;
+      background: #f1f5f9;
+      padding-bottom: 200px;
+      font-family: 'CustomMono', ui-monospace;
+    }
+  
+    .puzzle-display.completed {
+      padding-bottom: 1rem !important;
+    }
+
+    
+    .rank-display {
+      margin: 0rem 0.5rem 1rem 0.5rem;
+    }
+    
+  
+    /* Mobile input container */
+    .input-container {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: white;
+      z-index: 10;
+      width: 100%;
+      border-top: 1px solid #e2e8f0;
+      box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
+      padding: 0.5rem calc(0.5rem + env(safe-area-inset-left)) calc(0.5rem + env(safe-area-inset-bottom)) calc(0.5rem + env(safe-area-inset-right));
+      box-sizing: border-box;
+    }
+  
+    .custom-input {
+      border: 1px solid #e2e8f0;
+      padding: 0.63rem;
+      border-radius: 6px;
+      margin-bottom: 0.125rem;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 1.2rem;
+      min-height: 2.4rem;
+      background: white;
+      width: 100%;
+      color: #000;
+    }
+
+    .placeholder {
+      color: #9ca3af;
+    }
+  
+    /* Mobile keyboard */
+    .custom-keyboard {
+      width: 100%;
+      padding: .25rem 0 0 0;
+      box-sizing: border-box;
+      background-color: white;
+      touch-action: none;
+    }
+  
+    .keyboard-row {
+      display: grid;
+      grid-template-columns: repeat(10, 1fr);
+      gap: 0.02rem;
+      margin-bottom: 0.125rem;
+      justify-content: center;
+      width: 100%;
+    }
+  
+    .keyboard-key {
+      height: 3.3rem;
+      min-height: 2.2rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.2rem;
+      margin: 0.1rem 0.15rem 0.1rem 0.15rem;
+      cursor: pointer;
+      color: black;
+      background-color:rgb(233, 233, 233);
+      box-sizing: border-box;
+      touch-action: manipulation;
+      text-align: center;
+      font-size: 1.125rem;
+      font-weight: 600;
+      border: 1px solid rgb(200, 200, 200);
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-appearance: none !important;
+      appearance: none !important;
+      border-radius: 4px !important;
+      outline: none !important;
+      -webkit-tap-highlight-color: transparent !important;
+      transition: background-color 0.1s ease-out,
+                  transform 0.1s ease-out;
+      -webkit-user-select: none;
+      user-select: none;
+      -webkit-transform: translateZ(0);
+      transform: translateZ(0);
+    }
+  
+    .keyboard-key:active {
+      background-color: #94a3b8;
+      transform: translateY(2px);
+    }
+  
+    .stat-item {
+      background: #f1f5f9;
+      padding: 0.75rem;
+      border-radius: 0.375rem;
+      margin-bottom: 0.5rem;
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+  
+    /* Hide desktop elements */
+    .bottom-controls,
+    .reset-button,
+    .solved-expressions,
+    .keystroke-stats,
+    .share-button.copy {
+      display: none;
+    }
+  
+    /* Mobile completion state */
+    .puzzle-container.completed .puzzle-content {
+      position: static;
+      height: auto;
+      overflow: visible;
+      margin-top: 85px;
+      padding: 1rem; 
+    }
+  
+    .puzzle-container.completed {
+      position: static;
+      height: auto;
+      min-height: 100vh;
+      overflow-y: auto;
+    }
+  
+    .puzzle-display.completed .input-container {
+      display: none;
+    }
+  
+    .puzzle-container.completed .solved-expressions,
+    .puzzle-container.completed .keystroke-stats {
+      display: block;
+      margin: 1rem;
+    }
+  
+    .keystroke-stats {
+      margin-top: 0rem;
+    }
+  }
+  
+  /* ===================
+     iOS-specific Styles
+     =================== */
+  @supports (-webkit-touch-callout: none) {
+    .keyboard-key:active {
+      background-color: #94a3b8 !important;
+      transform: translateY(2px) !important;
+    }
+  }
+
+/* Tutorial Mode Styles */
+.tutorial-container {
+    --tutorial-guidance-bg: #ffe8fa;
+    --tutorial-guidance-border: #4a6fa5;
+    --tutorial-highlight-border: #f6b73c;
+    --tutorial-completion-bg: #e9f7ef;
+    --tutorial-completion-border: #27ae60;
+    --tutorial-button-bg: #2980b9;
+    --tutorial-button-hover: #3498db;
+  }
+  
+  /* Tutorial Guidance */
+  .tutorial-guidance {
+    background-color: #ffe8fa !important;
+    border-radius: 8px;
+    font-family: var(--main-font);
+    border-left: 4px solid #ab57a8;
+    border-right: 4px solid #ab57a8;
+    height: 130px !important;
+    overflow: hidden;
+    padding: 16px;
+    margin: 16px 0;
+    vertical-align: middle;
+  }
+  
+  .small-break {
+    min-height: 1rem;  /* adjust as needed */
+  } 
+
+  @media (max-width: 640px) {
+    .small-break {
+      min-height: 0.8rem;  /* adjust as needed */
+    }
+  }
+
+  .tutorial-guidance.emerge {
+    animation: emerge 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  @keyframes emerge {
+    0% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  
+  .tutorial-guidance.highlight {
+    background-color: #fff8e5;
+    border-left-color: #f6b73c;
+  }
+  
+  @media (max-width: 640px) {
+    .tutorial-guidance {
+      margin: 0.625rem 0.625rem 0.625rem 0.625rem !important;  /* 10px */
+      /*padding: 1rem 0.3125rem !important;  /* 16px 5px */
+      font-size: 0.9rem;
+      height: 140px !important;
+      vertical-align: middle;
+    }
+  }
+
+  /* Hide guidance when puzzle is completed */
+   .tutorial-guidance.completed,
+   .puzzle-display.completed ~ .tutorial-guidance {
+   /*display: none;*/
+    }
+  
+  /* Tutorial Message */
+  .tutorial-message {
+    font-size: 16px;
+  }
+  
+  .tutorial-message strong {
+    font-weight: 600;
+  }
+  
+  .tutorial-message a {
+    text-decoration: none;
+    border-bottom: 1px solid;
+    padding-bottom: 1px;
+    transition: color 0.2s;
+  }
+  
+  .tutorial-message a:hover {
+    opacity: 0.8;
+  }
+  
+  .tutorial-message .emoji {
+    font-size: 1.2em;
+  }
+  
+  @media (max-width: 640px) {
+    .tutorial-message {
+      font-size: 14px;
+    }
+  }
+  
+  /* Tutorial Puzzle Display */
+  .tutorial-puzzle-display {
+    height: 155px !important;
+    min-height: 155px !important;
+    max-height: 155px !important;
+    overflow-y: auto;
+    background: #f1f5f9;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    font-family: var(--mono-font);
+    line-height: 1.7;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+    transition: none;
+  }
+  
+  .tutorial-puzzle-display.completed {
+    height: 155px !important;
+    min-height: 155px !important;
+    max-height: 155px !important;
+  }
+  
+  @media (max-width: 640px) {
+    .tutorial-puzzle-display {
+      height: 155px !important;
+      min-height: 155px !important;
+      max-height: 155px !important;
+      padding: 0.8rem;
+    }
+  }
+  
+  /* Tutorial Highlights and Animations */
+  .spotlight {
+    background-color: #fff9c4;
+    box-shadow: 0 0 0 2px #fff9c4;
+    border-radius: 4px;
+  }
+  
+  .correct {
+    background-color: rgba(0, 255, 0, 0.25);
+    box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2);
+    border-radius: 4px;
+  }
+  
+  @keyframes pulse {
+    0% { 
+      box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
+      transform: scale(1);
+    }
+    50% { 
+      box-shadow: 0 0 0 6px rgba(255, 193, 7, 0);
+      transform: scale(1.05);
+    }
+    100% { 
+      box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
+      transform: scale(1);
+    }
+  }
+  
+  @keyframes tap-hint {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+  
+  .active-clue.tutorial-highlight {
+    box-shadow: 0 0 0 2px #ffc107;
+    animation: pulse 2.5s infinite;
+    background-color: rgba(255, 255, 0, 0.2);
+    font-weight: 500;
+  }
+  
+  .active-clue.tap-hint {
+    animation: tap-hint 2s infinite;
+  }
+  
+  /* Tutorial Completion */
+  .tutorial-completion {
+    background-color: #e9f7ef;
+    padding: 20px;
+    border-radius: 8px;
+    margin: 10px 10px 0px 10px;
+    text-align: center;
+    border: 2px solid #27ae60;
+    font-family: var(--mono-font);
+    animation: fade-in 0.5s ease-in-out;
+  }
+  
+  .tutorial-completion-title {
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+  
+  .tutorial-completion-text {
+    font-size: 16px;
+  }
+  
+  .tutorial-completion-wrapper {
+    margin: 0px;
+  }
+  
+  @keyframes fade-in {
+    from { 
+      opacity: 0; 
+      transform: translateY(-10px); 
+    }
+    to { 
+      opacity: 1; 
+      transform: translateY(0); 
+    }
+  }
+  
+  /* Play Game Button */
+  #playGameButton {
+    margin-top: 15px;
+    padding: 10px 20px;
+    background-color: #2980b9;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.2s, transform 0.1s;
+  }
+  
+  #playGameButton:hover {
+    background-color: #3498db;
+  }
+  
+  #playGameButton:active {
+    transform: scale(0.98);
+  }
+  
+  /* First Letter Hint */
+  .first-letter-hint {
+    font-weight: bold;
+    color: #0c63e4;
+  }
+
+  /* Submit button and input wrapper */
+  .input-submit-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .submit-answer {
+    padding: 0 1.5rem;
+    height: 60px;
+    background-color: #2563eb;
+    color: white;
+    border: none;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    font-weight: 500;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    white-space: nowrap;
+    font-size: 1rem;
+  }
+
+  .submit-answer:hover {
+    background-color: #1d4ed8;
+  }
+
+  .submit-answer:active {
+    background-color: #1e40af;
+    transform: scale(0.98);
+  }
+
+  .mobile-submit-button {
+    background-color: #2563eb !important;
+    color: white !important;
+    font-size: 1rem !important;
+    font-weight: 500 !important;
+  }