/* style for Voozo - there's a separate layout sheet for each rule count */

/*light mode colors*/
:root {
--bg-body: #f0f4f8;
--bg-container: #ffffff;
--text-primary: #1a202c;
--text-secondary: #6b7280;
--bg-rule-box-default: #e2e8f0;
--border-rule-box-default: #cbd5e1;
--text-rule-box-default: #334155;
--bg-word-card-hand: #4f46e5;
--text-word-card-hand: white;

--zone1-bg: #fee2e2; --zone1-border: #ef4444; --zone1-text: #991b1b;
--zone2-bg: #fefce8; --zone2-border: #facc15; --zone2-text: #92400e;
--zone3-bg: #dbeafe; --zone3-border: #3b82f6; --zone3-text: #1e40af;
--zone4-bg: #f9e2ff; --zone4-border: #d8b4fe; --zone4-text: #5b21b6;

--zone12-bg: #FFF5EE; --zone12-border: #F28500; --zone12-text: #B45309;
--zone13-bg: #ede9fe; --zone13-border: #a855f7; --zone13-text: #581c87;
--zone14-bg: #fef2f2; --zone14-border: #fca5a5; --zone14-text: #dc2626;
--zone23-bg: #e5f9e9; --zone23-border: #8fd0a3; --zone23-text: #2c6e3c;
--zone24-bg: #e0e7ff; --zone24-border: #93c5fd; --zone24-text: #2563eb;
--zone34-bg: #fffbe6; --zone34-border: #fde68a; --zone34-text: #b45309;

--zone123-bg: #f2d0a2; --zone123-border: #D2B48C; --zone123-text: #472100;
--zone124-bg: #eef2ff; --zone124-border: #a5b4fc; --zone124-text: #4f46e5;
--zone134-bg: #f3e8ff; --zone134-border: #d946ef; --zone134-text: #9333ea;
--zone234-bg: #dcfce7; --zone234-border: #34d399; --zone234-text: #047857;

--zone1234-bg: #e2e8f0; --zone1234-border: #94a3b8; --zone1234-text: #334155;

--zone0-bg: #e2e8f0; --zone0-border: #94a3b8; --zone0-text: #475569;
--zoneHand-bg: #e0f2fe; --zoneHand-border: #94a3b8; --zoneHand-text: #334155;
--placed-card-text-color: var(--text-rule-box-default);
--zone1-placed-card-text: var(--zone1-text);
--zone2-placed-card-text: var(--zone2-text);
--zone3-placed-card-text: var(--zone3-text);
--zone4-placed-card-text: var(--zone4-text);
--zone12-placed-card-text: var(--zone12-text);
--zone13-placed-card-text: var(--zone13-text);
--zone14-placed-card-text: var(--zone14-text);
--zone23-placed-card-text: var(--zone23-text);
--zone24-placed-card-text: var(--zone24-text);
--zone34-placed-card-text: var(--zone34-text);
--zone123-placed-card-text: var(--zone123-text);
--zone124-placed-card-text: var(--zone124-text);
--zone134-placed-card-text: var(--zone134-text);
--zone234-placed-card-text: var(--zone234-text);
--zone1234-placed-card-text: var(--zone1234-text);
--zone0-placed-card-text: var(--zone0-text);

}

html.dark {
--bg-body: #0F172A;
--bg-container: #1E293B;
--text-primary: #cbd5e1;
--text-secondary: #94a3b8;
--bg-rule-box-default: #2F3B4D;
--border-rule-box-default: #475569;
--text-rule-box-default: #cbd5e1;
--bg-word-card-hand: #6366F1;
--text-word-card-hand: white;

--zone1-bg: #7f1d1d; --zone1-border: #b91c1c; --zone1-text: #fecaca;
--zone2-bg: #a6a23f; --zone2-border: #827f30; --zone2-text: #fed7aa;
--zone3-bg: #1e3a8a; --zone3-border: #2563eb; --zone3-text: #bfdbfe;
--zone4-bg: #581c87; --zone4-border: #a855f7; --zone4-text: #e9d5ff;

--zone12-bg: #78350f; --zone12-border: #d97706; --zone12-text: #fed7aa;
--zone13-bg: #581c87; --zone13-border: #7e22ce; --zone13-text: #e9d5ff;
--zone14-bg: #7c2d12; --zone14-border: #c2410c; --zone14-text: #fed7aa;
--zone23-bg: #064e3b; --zone23-border: #059669; --zone23-text: #a7f3d0;
--zone24-bg: #1e3a8a; --zone24-border: #2563eb; --zone24-text: #bfdbfe;
--zone34-bg: #78350f; --zone34-border: #d97706; --zone34-text: #fed7aa;

--zone123-bg: #292524; --zone123-border: #57534e; --zone123-text: #e7e5e4;
--zone124-bg: #3f1d5e; --zone124-border: #7e22ce; --zone124-text: #e9d5ff;
--zone134-bg: #6b21a8; --zone134-border: #a855f7; --zone134-text: #f3e8ff;
--zone234-bg: #064e3b; --zone234-border: #059669; --zone234-text: #a7f3d0;

--zone1234-bg: #1f2937; --zone1234-border: #4b5563; --zone1234-text: #d1d5db;

--zone0-bg: #1f2937; --zone0-border: #4b5563; --zone0-text: #d1d5db;
--zoneHand-bg: #172554; --zoneHand-border: #3b82f6; --zoneHand-text: #bfdbfe;
--placed-card-text-color: var(--text-rule-box-default);
--zone1-placed-card-text: var(--zone1-text);
--zone2-placed-card-text: var(--zone2-text);
--zone3-placed-card-text: var(--zone3-text);
--zone4-placed-card-text: var(--zone4-text);
--zone12-placed-card-text: var(--zone12-text);
--zone13-placed-card-text: var(--zone13-text);
--zone14-placed-card-text: var(--zone14-text);
--zone23-placed-card-text: var(--zone23-text);
--zone24-placed-card-text: var(--zone24-text);
--zone34-placed-card-text: var(--zone34-text);
--zone123-placed-card-text: var(--zone123-text);
--zone124-placed-card-text: var(--zone124-text);
--zone134-placed-card-text: var(--zone134-text);
--zone234-placed-card-text: var(--zone234-text);
--zone1234-placed-card-text: var(--zone1234-text);
--zone0-placed-card-text: var(--zone0-text);

}

.logo {
  width: 30%;
  max-width: 300px;  /* Keeps it from getting too big */
  min-width: 150px;  /* Keeps it from getting too small */
  height: auto;
}

#status-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0.5rem 1rem;
background-color: var(--bg-container);
color: var(--text-secondary);
font-size: 1.00rem;
font-weight: bold;
text-align: center;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
z-index: 999;
transition: background-color 0.3s ease, color 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
}

#lives-display { left:0; }
#timer-display {  position: absolute; right: 3em; }

.top-bar {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 1rem;
align-items: center;
}

.top-bar-title {
flex-grow: 1;
text-align: center;
margin: 0 auto;
color: var(--text-primary);
font-size: 2.25rem;
font-weight: 700;
transition: color 0.3s ease;
line-height: 1;
}

.top-left-ui, .top-right-ui {
font-size: 1.0rem;
font-weight: 600;
color: var(--text-secondary);
transition: color 0.3s ease;
gap: 0.25rem;
text-align: center;
}

#daily-badge {
font-size: 1.00rem;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
overflow-y: auto;
font-family: sans-serif;
background-color: var(--bg-body);
color: var(--text-secondary);
transition: background-color 0.3s ease, color 0.3s ease;

/* Disables pull-to-refresh on most mobile browsers */
  overscroll-behavior-y: contain;
}

.game-container {
background-color: var(--bg-container);
border-radius: 1rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 2rem;
padding: 3rem;
width: 100%;
box-sizing: border-box;
position: relative;
margin: 0 auto;
transition: background-color 0.3s ease;
align-items: center;
flex-grow: 1;
}

.main-game-area {
display: flex;
flex-direction: column;
gap: 1.5rem;
width: 100%;
flex-grow: 1;
align-items: stretch;
justify-content: flex-start;
}



.icon-btn {
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-size: 1.25rem;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: white;
background-color: var(--text-secondary);
transition: background-color 0.2s ease;
}

.icon-btn:hover {
background-color: var(--text-primary);
}

#settings-btn {
padding: 0.875rem 1.125rem;
font-size: 1.5rem;
}

#settings-tutorial-text {
  white-space: pre-line;
}

/* these are the buttons for the various game modes */
.mode-btn {
    padding: 8px 16px;
    border: 1px solid #ccc;
    background: #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mode-btn.active {
    background-color: #4f46e5; /* Matching your indigo-600 theme */
    color: white;
    border-color: #4338ca;
    font-weight: bold;
}

/*This is how I toggle the visibility of the mode-specific settings */

/* 1. Hide both by default when they are inside the dynamic container */
#dynamic-settings-container .toggle-lives, 
#dynamic-settings-container .toggle-turns {
    display: none;
}

/* 2. If the container has the 'mode-classic' class, show Lives */
#dynamic-settings-container.mode-classic .toggle-lives {
    display: block;
}

/* 3. If the container has the 'mode-turnsLimit' class, show Turns */
#dynamic-settings-container.mode-turnsLimit .toggle-turns {
    display: block;
}


#new-game-modal-btn {
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
border-radius: 0.75rem;
background-color: #4f46e5;
color: white;
font-weight: 600;
transition: background-color 0.2s ease;
}
#new-game-modal-btn:hover {
background-color: #4338ca;
}

.share-results-btn {
padding: 0.6rem 0.9rem;
font-size: 0.95rem;
}

.rule-box {
border: 2px solid var(--border-rule-box-default);
border-radius: 0.75rem;
padding: 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
background-color: var(--bg-rule-box-default);
color: var(--text-rule-box-default);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
cursor: pointer;
position: relative;
min-height: 7em;
box-sizing: border-box;
z-index: 1;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.1s ease;
}

.rule-box:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 50;
}

#zone-1 { background-color: var(--zone1-bg); border-color: var(--zone1-border); color: var(--zone1-text); }
#zone-2 { background-color: var(--zone2-bg); border-color: var(--zone2-border); color: var(--zone2-text); }
#zone-3 { background-color: var(--zone3-bg); border-color: var(--zone3-border); color: var(--zone3-text); }
#zone-4 { background-color: var(--zone4-bg); border-color: var(--zone4-border); color: var(--zone4-text); }

#zone-1-2 { background-color: var(--zone12-bg); border-color: var(--zone12-border); color: var(--zone12-text); }
#zone-1-3{ background-color: var(--zone13-bg); border-color: var(--zone13-border); color: var(--zone13-text); }
#zone-1-4{ background-color: var(--zone14-bg); border-color: var(--zone14-border); color: var(--zone14-text); }
#zone-2-3 { background-color: var(--zone23-bg); border-color: var(--zone23-border); color: var(--zone23-text); }
#zone-2-4 { background-color: var(--zone24-bg); border-color: var(--zone24-border); color: var(--zone24-text); }
#zone-3-4 { background-color: var(--zone34-bg); border-color: var(--zone34-border); color: var(--zone34-text); }

#zone-1-2-3 { background-color: var(--zone123-bg); border-color: var(--zone123-border); color: var(--zone123-text); }
#zone-1-2-4 { background-color: var(--zone124-bg); border-color: var(--zone124-border); color: var(--zone124-text); }
#zone-1-3-4 { background-color: var(--zone134-bg); border-color: var(--zone134-border); color: var(--zone134-text); }
#zone-2-3-4 { background-color: var(--zone234-bg); border-color: var(--zone234-border); color: var(--zone234-text); }

#zone-1-2-3-4 { background-color: var(--zone1234-bg); border-color: var(--zone1234-border); color: var(--zone1234-text); }
#none-container { background-color: var(--zone0-bg); border-color: var(--zone0-border); color: var(--zone0-text); }
#hand-container {
background-color: var(--zoneHand-bg);
border-color: var(--zoneHand-border);
color: var(--zoneHand-text);
min-height: 100px;
}

.box-header {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
width: 100%;
}

.box-header .box-label {
font-weight: 700;
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.box-icons-container {
display: flex;
gap: 0.25rem;
align-items: center;
}

.rule-icon {
width: 18px;
height: 18px;
vertical-align: middle;
fill: currentColor;
}

.word-cards-container {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
justify-content: center;
align-items: flex-start;
flex-grow: 1;
width: 100%;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-rule-box-default) var(--bg-rule-box-default);
}

.word-cards-container::-webkit-scrollbar {
width: 8px;
}

.word-cards-container::-webkit-scrollbar-track {
background: var(--bg-rule-box-default);
border-radius: 10px;
}

.word-cards-container::-webkit-scrollbar-thumb {
background-color: var(--border-rule-box-default);
border-radius: 10px;
border: 2px solid var(--bg-rule-box-default);
}

.word-card {
padding: 0.35rem 0.6rem;
border-radius: 0.5rem;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
cursor: grab;
user-select: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease, color 0.2s ease;
outline: 2px solid transparent;
outline-offset: 2px;
background-color: var(--bg-word-card-hand);
color: var(--text-word-card-hand);
}

.word-card.placed-card {
color: inherit;
}

.light .word-card.played-from-hand {
background-color: #AEC6CF;
color: #000000;
}

.dark .word-card.played-from-hand {
background-color: #36454F;
color: #FFFFFF;
}

.word-card:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.word-card.selected {
outline-color: #f97316;
outline-style: dashed;
outline-width: 2px;
transform: scale(1.02);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.rule-hint {
position: absolute;
background-color: var(--bg-container);
color: var(--text-primary);
border: 1px solid var(--border-rule-box-default);
border-radius: 0.5rem;
padding: 0.5rem;
font-size: 0.75rem;
bottom: 100%;
top: auto;
left: 50%;
transform: translateX(-50%) translateY(-0.5rem);
z-index: 100;
white-space: pre-wrap;
text-align: left;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
width: max-content;
max-width: 200px;
box-sizing: border-box;
}

.rule-hint.visible {
opacity: 1;
visibility: visible;
}

.message-box {
background-color: #d1fae5;
color: #065f46;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
text-align: center;
opacity: 0;
transition: opacity 0.6s ease;
white-space: normal;
overflow: visible;
text-overflow: clip;
min-height: 2.5rem;
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 400px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}

.message-box.visible {
opacity: 1;
}

.message-box.error {
background-color: #fee2e2;
color: #991b1b;
}

.message-box.warning {
background-color: #f5f7dc;
color: #9c7368;
}

.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}

.modal-overlay.visible {
opacity: 1;
display: flex;
}

.modal-content {
background-color: var(--bg-container);
color: var(--text-primary);
padding: 2rem;
border-radius: 0.75rem;
position: relative;
width: 90%;
max-width: 500px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-content p {
color: var(--text-secondary);
}

.modal-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
}

.end-buttons-row {
display: none;
}

.end-buttons-row.visible {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}

.settings-button-row {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}

.settings-button-row button {
width: 48px;
height: 48px;
font-size: 1.5rem;
border-radius: 0.5rem;
}

#new-game-modal-btn {
background-color: #4f46e5;
color: white;
font-size: 1.75rem;
padding: 0.75rem;
width: 3.25rem;
height: 3.25rem;
border: none;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
transition: background-color 0.2s ease;
outline: none;
}

#new-game-modal-btn:focus {
outline: none;
box-shadow: none;
}

#new-game-modal-btn:hover {
background-color: #4338ca;
}

.word-card.incorrect {
border: 2px dashed red;
opacity: 0.7;
}

#zone-feedback-bubble {
position: fixed;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 0.875rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1001;
}

#zone-feedback-bubble.success {
background-color: #16a34a;
}

#zone-feedback-bubble.error {
background-color: #dc2626;
}

html.light {
background-color: white;
color: black;
}

html.dark {
background-color: #111;
color: white;
}

.modal-setting-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-rule-box-default);
}

.modal-setting-item:last-child {
border-bottom: none;
}

.setting-label {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
flex-shrink: 0;
margin-right: 1rem;
}

.slider-container {
align-items: center;
gap: 0.75rem;

width: 100%;
}

.slider-container input {
  width: 85%; /*I want these sliders to stretch for the entire row, but I also want to leave room for the .slider-value label beside each slider */
}
.slider-value {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
min-width: 20px;
text-align: center;
}



#byline-display {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 0.5rem 1rem;
background-color: var(--bg-container);
color: var(--text-secondary);
font-size: 0.75rem;
text-align: center;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
z-index: 999;
transition: background-color 0.3s ease, color 0.3s ease;
}

@media (max-width: 767px) {
#byline-display {
font-size: 0.65rem;
padding: 0.4rem 0.75rem;
}
}

#rules-list-container {
max-height: 70vh;
overflow-y: auto;
}

.rules-popup-content {
background: var(--bg-container);
color: var(--text-primary);
padding: 2rem;
border-radius: 0.5rem;
max-width: 90%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
flex-direction: column;
}

.column {
float: left;
padding: 10px;
}

.row:after {
content: "";
display: table;
clear: both;
}