/* ==========================================================
   Elements Grid — visual style
   (matches grid.css, no red/blue title alternation)
   Presidential / civic-document theme.
   All original class names and layout dimensions preserved —
   this only changes color, type, shadow, and motion tokens.
   ========================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

   :root {
     --navy-950: #0f1e33;
     --navy-800: #1b2f4e;
     --navy-700: #24406a;
     --gold-600: #b8892b;
     --gold-500: #c9a227;
     --gold-100: #f4e6c1;
     --cream-50: #f8f4ea;
     --cream-100: #f0e9d8;
     --paper: #fffdf8;
     --ink: #1c2333;
     --ink-soft: #566178;
     --green-600: #2e7d4f;
     --red-600: #b23b3b;
     --shadow-sm: 0 1px 2px rgba(15, 30, 51, 0.08);
     --shadow-md: 0 4px 14px rgba(15, 30, 51, 0.12);
     --shadow-lg: 0 12px 32px rgba(15, 30, 51, 0.18);
   }
   
   * { box-sizing: border-box; }
   
   body {
     font-family: 'Inter', Arial, sans-serif;
     background:
       radial-gradient(circle at 15% 0%, rgba(184, 137, 43, 0.07), transparent 45%),
       var(--cream-50);
     padding: 10px;
     margin: 0;
     overflow-y: auto;
     color: var(--ink);
   }
   
   ::selection {
     background: var(--gold-100);
     color: var(--navy-950);
   }
   
   /* Works for all breakpoints */
   .cell { position: relative; overflow: hidden; }
   .cell img,
   .cell .cell-full-image {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     animation: reveal-cell 0.35s ease-out;
   }
   
   @keyframes reveal-cell {
     from { opacity: 0; transform: scale(1.06); }
     to   { opacity: 1; transform: scale(1); }
   }
   
   .top-bar {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     padding: 12px;
     font-size: 14px;
     background-color: var(--paper);
     border-bottom: 1px solid var(--cream-100);
     box-shadow: var(--shadow-sm);
   }
   
   .top-bar a {
     text-decoration: none;
     color: var(--navy-700);
     font-weight: 600;
     letter-spacing: 0.01em;
     transition: color 0.15s ease;
   }
   
   .top-bar a:hover {
     color: var(--gold-600);
   }
   
   .grid-number {
     font-family: 'Playfair Display', Georgia, serif;
     font-weight: 700;
     color: var(--navy-950);
     letter-spacing: 0.04em;
   }
   
   /* Grid block wrapper */
   .grid-block {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     gap: 10px;
     margin-top: 25px;
   }
   
   /* Row labels on the left */
   .row-labels {
     display: grid;
     grid-template-rows: repeat(3, 180px);
     justify-items: end;
     align-items: center;
     margin-top: 100px;
     margin-right: 10px;
   }
   
   .row-label {
     font-weight: 600;
     font-size: 13px;
     color: var(--navy-800);
     text-align: right;
     letter-spacing: 0.01em;
     max-width: 140px;
     line-height: 1.3;
   }
   
   /* Main container with column labels above grid */
   .main-container {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   /* Column labels above the grid */
   .col-labels {
     display: grid;
     grid-template-columns: repeat(3, 180px);
     margin-bottom: 5px;
   }
   
   .col-label {
     text-align: center;
     font-weight: 600;
     font-size: 13px;
     color: var(--navy-800);
     display: flex;
     align-items: flex-end;
     justify-content: center;
     padding-bottom: 4px;
     line-height: 1.3;
     letter-spacing: 0.01em;
     max-width: 150px;
     margin: 0 auto;
   }
   
   /* Main grid */
   .main-grid {
     display: grid;
     grid-template-columns: repeat(3, 180px);
     grid-template-rows: repeat(3, 180px);
     border: 2px solid var(--navy-950);
     border-radius: 12px;
     overflow: hidden;
     box-shadow: var(--shadow-lg);
     background: var(--navy-950);
     gap: 1px;
   }
   
   /* Each cell */
   .cell {
     background-color: var(--paper);
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.18s ease, transform 0.18s ease;
   }
   
   .cell:hover {
     background-color: var(--gold-100);
   }
   
   .cell.correct:hover {
     background-color: var(--paper);
     cursor: default;
   }
   
   /* Wrapper that holds grid block + side panel side-by-side */
   .wrapper {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     gap: 30px;
     margin-top: 20px;
     margin-bottom: 5px;
   }
   
   /* Side panel styling */
   .side-panel {
     display: flex;
     flex-direction: column;
     margin-top: 310px;
     align-items: center;
   }
   
   .guesses-label {
     font-size: 12px;
     color: var(--ink-soft);
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     margin-bottom: 5px;
   }
   
   .guesses-count {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 44px;
     font-weight: 800;
     color: var(--navy-950);
     margin-bottom: 12px;
   }
   
   .give-up-btn {
     background-color: var(--navy-800);
     color: var(--cream-50);
     border: none;
     padding: 10px 16px;
     border-radius: 8px;
     font-weight: 700;
     cursor: pointer;
     font-size: 13px;
     letter-spacing: 0.02em;
     box-shadow: var(--shadow-sm);
     transition: background-color 0.15s ease, transform 0.15s ease;
   }
   
   .give-up-btn:hover {
     background-color: var(--navy-700);
     transform: translateY(-1px);
   }
   
   .card-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
     margin: 10px auto;
     max-width: 900px;
   }
   
   .modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(15, 30, 51, 0.55);
     backdrop-filter: blur(2px);
   }
   
   .modal-content {
     background-color: var(--paper);
     margin: 10% auto;
     padding: 25px 30px;
     border-radius: 12px;
     width: 90%;
     max-width: 500px;
     box-shadow: var(--shadow-lg);
     position: relative;
     border-top: 4px solid var(--gold-500);
   }
   
   .close-button {
     position: absolute;
     top: 12px;
     right: 18px;
     font-size: 24px;
     color: var(--ink-soft);
     cursor: pointer;
     transition: color 0.15s ease;
   }
   
   .close-button:hover {
     color: var(--navy-950);
   }
   
   .rules-list {
     margin-top: 15px;
     padding-left: 20px;
   }
   
   .rules-list li {
     margin-bottom: 10px;
     line-height: 1.5;
   }
   
   .rules-tip {
     margin-top: 20px;
     font-style: italic;
     color: var(--ink-soft);
   }
   
   #guess-modal .modal-content {
     background-color: var(--paper);
     margin: 12% auto;
     padding: 16px 18px;
     border: none;
     border-top: 4px solid var(--gold-500);
     width: 280px;
     max-width: 90%;
     border-radius: 12px;
     text-align: center;
     display: flex;
     flex-direction: column;
     gap: 8px;
     box-shadow: var(--shadow-lg);
   }
   
   #guess-modal h2 {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 19px;
     font-weight: 700;
     margin: 0;
     color: var(--navy-950);
   }
   
   #guess-context {
     font-size: 13px;
     color: var(--ink-soft);
     margin: 0;
     line-height: 1.3;
     font-weight: 600;
   }
   
   #guess-input {
     width: 100%;
     padding: 6px;
     font-size: 15px;
     margin: 4px 0 0;
     border: none;
     border-bottom: 2px solid var(--navy-700);
     background-color: transparent;
     text-align: center;
     outline: none;
     color: var(--ink);
   }
   
   #submit-guess {
     margin-top: 8px;
     background-color: var(--navy-800);
     color: white;
     border: none;
     padding: 9px 18px;
     font-size: 15px;
     font-weight: 700;
     border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s ease;
   }
   
   #submit-guess:hover {
     background-color: var(--navy-700);
   }
   
   #guess-modal .close-button {
     position: absolute;
     top: 8px;
     right: 10px;
     font-size: 20px;
     color: var(--ink-soft);
     cursor: pointer;
   }
   
   .autocomplete-wrapper {
     position: relative;
     width: 480px;
     max-width: 100%;
   }
   
   #guess-input {
     border: none;
     outline: none;
     font-size: 18px;
     width: 100%;
     text-align: center;
     padding: 12px;
     background-color: transparent;
     border-bottom: none !important;
   }
   
   #autocomplete-box {
     position: absolute;
     background-color: var(--paper) !important;
     top: calc(100% + 4px);
     left: 50%;
     transform: translateX(-50%);
     width: 312px;
     max-width: 90vw;
     border-radius: 10px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border: 2px solid var(--navy-700);
     box-shadow: var(--shadow-lg);
     display: none;
     z-index: 1000;
     overflow-y: auto;
     max-height: 300px;
     padding: 6px 0;
   }
   
   .autocomplete-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 14px 18px;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
     background-color: var(--paper) !important;
     border-bottom: 1px solid var(--cream-100);
     transition: background 0.15s ease;
   }
   
   .autocomplete-item:hover {
     background-color: var(--cream-50) !important;
   }
   
   .autocomplete-item:last-child {
     border-bottom: none;
   }
   
   .autocomplete-text {
     display: flex;
     flex-direction: column;
   }
   
   .autocomplete-text strong {
     font-size: 16px;
     color: var(--navy-950);
   }
   
   .autocomplete-text span {
     font-size: 13px;
     color: var(--ink-soft);
     margin-top: 2px;
   }
   
   .autocomplete-select-btn {
     background-color: var(--green-600);
     color: white;
     font-size: 13px;
     font-weight: 700;
     border: none;
     border-radius: 6px;
     padding: 6px 16px;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.15s ease;
   }
   
   .autocomplete-select-btn:hover {
     background-color: #256b42;
     transform: translateY(-1px);
   }
   
   .autocomplete-select-btn.disabled {
     background-color: #cfd3d9;
     color: #7a808a;
     cursor: not-allowed;
   }
   
   #endgame-modal .modal-content {
     width: fit-content;
     margin: auto;
     padding: 30px;
     background-color: var(--paper);
     border-radius: 14px;
     box-shadow: var(--shadow-lg);
     text-align: center;
   }
   
   .summary-section {
     margin-top: 30px;
   }
   
   .summary-section h3 {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 20px;
     margin-bottom: 15px;
     color: var(--navy-950);
   }
   
   .summary-grid {
     display: grid;
     grid-template-columns: repeat(3, 130px);
     grid-template-rows: repeat(3, 130px);
     gap: 2px;
     justify-content: center;
     align-items: center;
     padding: 10px;
     border-radius: 8px;
     overflow: hidden;
     border: 2px solid var(--navy-950);
     background: var(--navy-950);
   }
   
   .summary-grid .cell {
     width: 130px;
     height: 130px;
     border: none;
     background-color: var(--paper);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 13px;
     text-align: center;
     padding: 6px;
     box-sizing: border-box;
     font-weight: 600;
   }
   
   .summary-grid .correct {
     background-color: #e5f3ea;
     color: #1d5c39;
   }
   
   .summary-grid .empty {
     background-color: #fbeaea;
     color: #7c2727;
   }
   
   #copy-results-btn {
     margin-top: 10px;
     padding: 10px 16px;
     background-color: var(--navy-700);
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-size: 14px;
     font-weight: 600;
     transition: background-color 0.2s ease;
   }
   
   #copy-results-btn:hover {
     background-color: var(--navy-950);
   }
   
   #copy-confirmation {
     margin-top: 8px;
     font-size: 13px;
     color: var(--green-600);
     font-weight: 600;
   }
   
   #result-summary-grid .cell {
     cursor: pointer;
     transition: background-color 0.2s ease, color 0.2s ease;
   }
   
   #result-summary-grid .cell:hover {
     background-color: var(--gold-100);
     color: var(--navy-950);
     text-decoration: underline;
   }
   
   #answers-modal .modal-content {
     max-width: 300px;
     margin: auto;
     padding: 30px 40px;
     background-color: var(--paper);
     border-radius: 14px;
     box-shadow: var(--shadow-lg);
     text-align: center;
     border-top: 6px solid var(--gold-500);
     position: relative;
   }
   
   #answers-modal-title {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 20px;
     font-weight: 700;
     color: var(--navy-950);
     margin-bottom: 20px;
   }
   
   #answer-list {
     list-style: none;
     padding: 0;
     margin: 0;
     font-size: 16px;
     color: var(--ink);
     max-height: 300px;
     overflow-y: auto;
   }
   
   #answer-list li {
     text-align: center;
     margin: 12px 0;
   }
   
   #close-answers {
     position: absolute;
     top: 14px;
     right: 18px;
     font-size: 22px;
     color: var(--ink-soft);
     cursor: pointer;
     font-weight: bold;
   }
   
   #close-answers:hover {
     color: var(--navy-950);
   }
   
   .contact-email {
     position: absolute;
     bottom: 40px;
     left: 30px;
     font-size: 14px;
     color: var(--ink-soft);
     font-family: 'Inter', Arial, sans-serif;
   }
   
   .contact-email a {
     color: var(--navy-700);
     text-decoration: none;
   }
   
   .contact-email a:hover {
     text-decoration: underline;
   }
   
   #play-again-btn,
   #share-results-btn {
     padding: 10px 20px;
     font-size: 15px;
     font-weight: 700;
     background-color: var(--navy-800);
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.2s ease, transform 0.15s ease;
   }
   
   #play-again-btn:hover,
   #share-results-btn:hover {
     background-color: var(--navy-700);
     transform: translateY(-1px);
   }
   
   .grid-heading {
     text-align: center;
     margin-bottom: 0;
   }
   
   .grid-title {
     font-family: 'Playfair Display', Georgia, serif;
     font-size: 34px;
     font-weight: 800;
     color: var(--navy-950);
     margin: 0 0 10px 0;
     line-height: 1.2;
     letter-spacing: 0.01em;
   }
   
   .grid-title span {
     color: var(--navy-950);
   }
   
   .footer {
     text-align: center;
     margin-top: 5px;
     margin-bottom: 10px;
     font-size: 15px;
     color: var(--ink-soft);
     font-family: 'Inter', Arial, sans-serif;
   }
   
   .footer a {
     color: var(--navy-700);
     text-decoration: none;
     font-weight: 600;
   }
   
   .footer a:hover {
     text-decoration: underline;
   }
   
   #archives-list {
     max-height: 300px;
     overflow-y: auto;
     margin-top: 10px;
   }
   
   .archive-item {
     background-color: var(--cream-50) !important;
     color: var(--navy-950) !important;
     font-weight: 600;
     transition: background-color 0.15s ease;
   }
   
   .archive-item:hover {
     background-color: var(--gold-100) !important;
   }
   
   @media (max-width: 768px) {
     body { padding: 5px; }
     .top-bar { gap: 15px; font-size: 12px; padding: 8px; }
     .grid-block { display: flex; justify-content: center; align-items: flex-start; margin-top: 10px; gap: 5px; }
     .row-labels { display: grid; grid-template-rows: repeat(3, 120px); justify-items: end; align-items: center; margin-top: 60px; margin-right: 0px; }
     .row-label { font-size: 12px; text-align: right; padding: 5px; }
     .main-container { width: 100%; display: flex; justify-content: center; }
     .col-labels { grid-template-columns: repeat(3, 1fr); margin-bottom: 5px; }
     .col-label { font-size: 12px; padding-bottom: 2px; max-width: 120px; margin: 0; }
     .main-grid { grid-template-columns: repeat(3, 120px); grid-template-rows: repeat(3, 120px); margin: 0 auto; }
     .cell { font-size: 12px; }
     .wrapper { flex-direction: column; gap: 15px; margin: 10px auto; align-items: center; justify-content: center; text-align: center; }
     .side-panel { margin-top: 0; align-items: center; text-align: center; }
     .guesses-label { font-size: 12px; }
     .guesses-count { font-size: 32px; }
     .give-up-btn { padding: 8px 12px; font-size: 12px; }
     .card-grid { margin: 20px auto; gap: 15px; max-width: 100%; }
     .modal-content { width: 90%; max-width: 400px; padding: 20px; }
     #guess-modal .modal-content { width: 90%; max-width: 300px; padding: 12px; }
     #guess-input { font-size: 14px; padding: 8px; }
     .autocomplete-wrapper { width: 100%; }
     #autocomplete-box { width: 90%; max-width: 280px; }
     .autocomplete-item { font-size: 14px; padding: 10px 14px; }
     .autocomplete-select-btn { font-size: 12px; padding: 5px 12px; }
     #endgame-modal .modal-content { width: 90%; padding: 20px; }
     .summary-grid { grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); }
     .summary-grid .cell { width: 100px; height: 100px; font-size: 10px; padding: 4px; }
     #answers-modal .modal-content { max-width: 280px; padding: 20px; }
     #answers-modal-title { font-size: 18px; }
     #answer-list { font-size: 14px; }
     .grid-title { font-size: 26px; }
     .footer { text-align: center; position: static; bottom: auto; left: auto; font-size: 14px; margin-top: 10px; margin-bottom: 10px; }
     .contact-email { position: static; text-align: center; margin: 0; }
   }
   
   @media (max-width: 780px) {
     .side-panel { transform: translateX(40px) !important; transition: transform 0.2s ease; }
     .footer { transform: translateX(40px) !important; transition: transform 0.2s ease; }
   }
   
   @media (max-width: 480px) {
     body { padding: 4px; }
     .top-bar { gap: 8px; font-size: 10px; padding: 6px; transform: translateX(40px) !important; transition: transform 0.2s ease; }
     .grid-block { display: flex; justify-content: center; align-items: flex-start; margin-top: 8px; gap: 3px; }
     .row-labels { display: grid; grid-template-rows: repeat(3, 100px); justify-items: end; align-items: center; margin-top: 60px !important; margin-right: 0; }
     .row-label { font-size: 10px; text-align: right; padding: 3px; }
     .main-container { width: 100%; display: flex; justify-content: center; }
     .col-labels { grid-template-columns: repeat(3, 1fr); margin-bottom: 4px; }
     .col-label { font-size: 10px; padding-bottom: 2px; max-width: 100px; margin: 0; }
     .main-grid { grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); margin: 0 auto; }
     .cell { font-size: 11px; }
     .wrapper { flex-direction: column; gap: 10px; margin: 5px auto; align-items: center; justify-content: center; text-align: center; }
     .side-panel { margin-top: 0; align-items: center; text-align: center; transform: translateX(40px) !important; transition: transform 0.2s ease; }
     .guesses-label { font-size: 10px; }
     .guesses-count { font-size: 24px; }
     .give-up-btn { padding: 6px 10px; font-size: 10px; }
     .card-grid { margin: 10px auto; gap: 10px; max-width: 100%; }
     .modal-content { width: 90%; max-width: 300px; padding: 12px; }
     #guess-modal .modal-content { width: 85%; max-width: 260px; padding: 10px; }
     #guess-input { font-size: 12px; padding: 6px; }
     .autocomplete-wrapper { width: 100%; }
     #autocomplete-box { width: 85%; max-width: 240px; }
     .autocomplete-item { font-size: 12px; padding: 8px 10px; }
     .autocomplete-select-btn { font-size: 10px; padding: 4px 10px; }
     #endgame-modal .modal-content { width: 85%; padding: 15px; }
     .summary-grid { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(3, 60px); }
     .summary-grid .cell { width: 60px; height: 60px; font-size: 8px; padding: 3px; }
     #answers-modal .modal-content { max-width: 240px; padding: 15px; }
     #answers-modal-title { font-size: 16px; }
     #answer-list { font-size: 12px; }
     .grid-title { font-size: 20px; }
     .footer { text-align: center; font-size: 12px; margin-top: 5px; margin-bottom: 5px; transform: translateX(40px) !important; transition: transform 0.2s ease; }
     .contact-email { text-align: center; margin: 0; }
   }