From 0b510393f4653712b660405cca6dfcb7b0925953 Mon Sep 17 00:00:00 2001
From: minecartchris <minecartchris@noreply.localhost>
Date: Fri, 12 Dec 2025 16:13:00 -0500
Subject: [PATCH] Update static/style.css

---
 static/style.css | 848 +++++++++++++++++++++++++++++------------------
 1 file changed, 529 insertions(+), 319 deletions(-)

diff --git a/static/style.css b/static/style.css
index 343a926..9bc4976 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,319 +1,529 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: Arial, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-}
-
-.container {
-    background: white;
-    border-radius: 15px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-    max-width: 900px;
-    width: 100%;
-    padding: 40px;
-}
-
-h1 {
-    text-align: center;
-    color: #333;
-    margin-bottom: 30px;
-    font-size: 2.5em;
-}
-
-h2 {
-    color: #667eea;
-    margin-bottom: 20px;
-    text-align: center;
-}
-
-h3 {
-    color: #555;
-    margin-bottom: 15px;
-    font-size: 1.1em;
-}
-
-.screen {
-    display: block;
-}
-
-.screen.hidden {
-    display: none;
-}
-
-/* Start Screen */
-#startScreen .form-group {
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-#startScreen label {
-    display: block;
-    margin-bottom: 10px;
-    font-size: 1.1em;
-    color: #333;
-}
-
-#startScreen input {
-    padding: 10px 15px;
-    font-size: 1em;
-    border: 2px solid #667eea;
-    border-radius: 5px;
-    margin-right: 10px;
-    width: 100px;
-}
-
-/* Game Header */
-.game-header {
-    margin-bottom: 30px;
-    padding: 20px;
-    background: #f8f9fa;
-    border-radius: 10px;
-}
-
-.info-box {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 15px;
-    margin-bottom: 15px;
-}
-
-.info-box h3 {
-    background: #667eea;
-    color: white;
-    padding: 15px;
-    border-radius: 8px;
-    margin-bottom: 0;
-    font-size: 1em;
-}
-
-.message {
-    padding: 15px;
-    background: #e8f5e9;
-    border-left: 4px solid #4caf50;
-    border-radius: 5px;
-    color: #2e7d32;
-    display: none;
-    margin-top: 10px;
-}
-
-.message.show {
-    display: block;
-}
-
-.message.error {
-    background: #ffebee;
-    border-left-color: #f44336;
-    color: #c62828;
-}
-
-/* Game Content */
-.game-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-}
-
-.section {
-    background: #f8f9fa;
-    padding: 20px;
-    border-radius: 10px;
-    border: 1px solid #e0e0e0;
-}
-
-.stocks-list,
-.holdings-list {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.stock-item,
-.holding-item {
-    background: white;
-    padding: 12px;
-    border-radius: 6px;
-    border-left: 4px solid #667eea;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.holding-item {
-    border-left-color: #764ba2;
-}
-
-.stock-item span,
-.holding-item span {
-    font-weight: bold;
-    color: #667eea;
-}
-
-/* Form Groups */
-.form-group {
-    margin-bottom: 15px;
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: 8px;
-    color: #333;
-    font-weight: bold;
-}
-
-.form-group input,
-.form-group select {
-    width: 100%;
-    padding: 10px;
-    border: 2px solid #e0e0e0;
-    border-radius: 5px;
-    font-size: 1em;
-    transition: border-color 0.3s;
-}
-
-.form-group input:focus,
-.form-group select:focus {
-    outline: none;
-    border-color: #667eea;
-}
-
-/* Buttons */
-button {
-    padding: 12px 20px;
-    border: none;
-    border-radius: 6px;
-    font-size: 1em;
-    cursor: pointer;
-    transition: all 0.3s;
-    font-weight: bold;
-}
-
-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-}
-
-#startScreen button {
-    background: #667eea;
-    color: white;
-}
-
-#startScreen button:hover {
-    background: #764ba2;
-}
-
-.button-group {
-    display: flex;
-    gap: 10px;
-}
-
-.btn-buy {
-    background: #4caf50;
-    color: white;
-    flex: 1;
-}
-
-.btn-buy:hover {
-    background: #45a049;
-}
-
-.btn-sell {
-    background: #ff9800;
-    color: white;
-    flex: 1;
-}
-
-.btn-sell:hover {
-    background: #e68900;
-}
-
-.btn-next-day {
-    background: #667eea;
-    color: white;
-    width: 100%;
-    padding: 15px;
-    font-size: 1.1em;
-}
-
-.btn-next-day:hover {
-    background: #764ba2;
-}
-
-/* End Screen */
-.end-stats {
-    text-align: center;
-    padding: 20px;
-    background: #f8f9fa;
-    border-radius: 10px;
-}
-
-.end-stats p {
-    font-size: 1.1em;
-    margin: 10px 0;
-    color: #333;
-}
-
-.end-stats .profit {
-    font-size: 1.3em;
-    font-weight: bold;
-    color: #4caf50;
-    margin-top: 20px;
-}
-
-#finalHoldings {
-    text-align: left;
-    margin: 20px 0;
-    padding: 15px;
-    background: white;
-    border-radius: 6px;
-}
-
-.holding-final {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px 0;
-    border-bottom: 1px solid #e0e0e0;
-}
-
-.holding-final:last-child {
-    border-bottom: none;
-}
-
-#endScreen button {
-    background: #667eea;
-    color: white;
-    margin-top: 20px;
-    padding: 12px 30px;
-}
-
-#endScreen button:hover {
-    background: #764ba2;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .container {
-        padding: 20px;
-    }
-
-    .game-content {
-        grid-template-columns: 1fr;
-    }
-
-    .info-box {
-        grid-template-columns: 1fr;
-    }
-
-    h1 {
-        font-size: 1.8em;
-    }
-}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.container {
+    background: white;
+    border-radius: 15px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    max-width: 900px;
+    width: 100%;
+    padding: 40px;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 2.5em;
+}
+
+h2 {
+    color: #667eea;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+h3 {
+    color: #555;
+    margin-bottom: 15px;
+    font-size: 1.1em;
+}
+
+.screen {
+    display: block;
+}
+
+.screen.hidden {
+    display: none;
+}
+
+/* Start Screen */
+#startScreen .form-group {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#startScreen label {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 1.1em;
+    color: #333;
+}
+
+#startScreen input {
+    padding: 10px 15px;
+    font-size: 1em;
+    border: 2px solid #667eea;
+    border-radius: 5px;
+    margin-right: 10px;
+    width: 100px;
+}
+
+/* Game Header */
+.game-header {
+    margin-bottom: 30px;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 10px;
+}
+
+.info-box {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.info-box h3 {
+    background: #667eea;
+    color: white;
+    padding: 15px;
+    border-radius: 8px;
+    margin-bottom: 0;
+    font-size: 1em;
+}
+
+.section .info-box {
+    margin-bottom: 20px;
+}
+
+.message {
+    padding: 15px;
+    background: #e8f5e9;
+    border-left: 4px solid #4caf50;
+    border-radius: 5px;
+    color: #2e7d32;
+    display: none;
+}
+
+.message.show {
+    display: block;
+}
+
+.message.error {
+    background: #ffebee;
+    border-left-color: #f44336;
+    color: #c62828;
+}
+
+/* Game Content */
+.game-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.section {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 10px;
+    border: 1px solid #e0e0e0;
+}
+
+.stocks-list,
+.holdings-list,
+.companies-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.stock-item,
+.holding-item,
+.company-item {
+    background: white;
+    padding: 12px;
+    border-radius: 6px;
+    border-left: 4px solid #667eea;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.holding-item {
+    border-left-color: #764ba2;
+}
+
+.company-item {
+    border-left-color: #2196F3;
+    padding: 15px;
+    gap: 20px;
+}
+
+.company-info {
+    flex: 1;
+}
+
+.company-name {
+    font-weight: bold;
+    color: #333;
+    font-size: 1.05em;
+    margin-bottom: 5px;
+}
+
+.company-details {
+    display: flex;
+    gap: 20px;
+    font-size: 0.9em;
+    color: #666;
+}
+
+.company-details span {
+    font-weight: 500;
+}
+
+.company-value {
+    font-weight: bold;
+    color: #2196F3;
+    font-size: 1.1em;
+    min-width: 100px;
+    text-align: right;
+}
+
+.stock-item span,
+.holding-item span {
+    font-weight: bold;
+    color: #667eea;
+}
+
+/* Form Groups */
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    color: #333;
+    font-weight: bold;
+}
+
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #e0e0e0;
+    border-radius: 5px;
+    font-size: 1em;
+    transition: border-color 0.3s;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+    outline: none;
+    border-color: #667eea;
+}
+
+/* Buttons */
+button {
+    padding: 12px 20px;
+    border: none;
+    border-radius: 6px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: all 0.3s;
+    font-weight: bold;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+#startScreen button {
+    background: #667eea;
+    color: white;
+}
+
+#startScreen button:hover {
+    background: #764ba2;
+}
+
+.button-group {
+    display: flex;
+    gap: 10px;
+}
+
+.btn-buy {
+    background: #4caf50;
+    color: white;
+    flex: 1;
+}
+
+.btn-buy:hover {
+    background: #45a049;
+}
+
+.btn-sell {
+    background: #ff9800;
+    color: white;
+    flex: 1;
+}
+
+.btn-sell:hover {
+    background: #e68900;
+}
+
+.btn-buy-all {
+    background: #2196F3;
+    color: white;
+    flex: 1;
+}
+
+.btn-buy-all:hover {
+    background: #0b7dda;
+}
+
+.btn-sell-all {
+    background: #f57c00;
+    color: white;
+    flex: 1;
+}
+
+.btn-sell-all:hover {
+    background: #e65100;
+}
+
+.btn-next-day {
+    background: #667eea;
+    color: white;
+    width: 100%;
+    padding: 15px;
+    font-size: 1.1em;
+}
+
+.btn-next-day:hover {
+    background: #764ba2;
+}
+
+/* Charts Container */
+.charts-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+    margin-top: 30px;
+}
+
+.chart-item {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 10px;
+    border: 1px solid #e0e0e0;
+    min-height: 400px;
+    position: relative;
+}
+
+.chart-item canvas {
+    max-height: 400px;
+}
+
+/* End Screen */
+.end-stats {
+    text-align: center;
+    padding: 20px;
+    background: #f8f9fa;
+    border-radius: 10px;
+}
+
+.end-stats p {
+    font-size: 1.1em;
+    margin: 10px 0;
+    color: #333;
+}
+
+.end-stats .profit {
+    font-size: 1.3em;
+    font-weight: bold;
+    color: #4caf50;
+    margin-top: 20px;
+}
+
+#finalHoldings {
+    text-align: left;
+    margin: 20px 0;
+    padding: 15px;
+    background: white;
+    border-radius: 6px;
+}
+
+.holding-final {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.holding-final:last-child {
+    border-bottom: none;
+}
+
+#endScreen button {
+    background: #667eea;
+    color: white;
+    margin-top: 20px;
+    padding: 12px 30px;
+}
+
+#endScreen button:hover {
+    background: #764ba2;
+}
+
+.btn-leaderboard {
+    background: #9c27b0;
+    color: white;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.btn-leaderboard:hover {
+    background: #7b1fa2;
+}
+
+.btn-save-score {
+    background: #667eea;
+    color: white;
+    width: 100%;
+}
+
+.btn-save-score:hover {
+    background: #764ba2;
+}
+
+.btn-back {
+    background: #667eea;
+    color: white;
+    width: 100%;
+    margin-top: 20px;
+    padding: 12px;
+}
+
+.btn-back:hover {
+    background: #764ba2;
+}
+
+/* Leaderboard Screen */
+.leaderboard-container {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 20px;
+    min-height: 300px;
+}
+
+.leaderboard-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.leaderboard-entry {
+    background: white;
+    padding: 15px;
+    border-radius: 8px;
+    border-left: 4px solid #667eea;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.leaderboard-entry.rank-1 {
+    border-left-color: #ffd700;
+    background: #fffbf0;
+}
+
+.leaderboard-entry.rank-2 {
+    border-left-color: #c0c0c0;
+    background: #f5f5f5;
+}
+
+.leaderboard-entry.rank-3 {
+    border-left-color: #cd7f32;
+    background: #f9f5f0;
+}
+
+.leaderboard-rank {
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #667eea;
+    min-width: 40px;
+    text-align: center;
+}
+
+.leaderboard-info {
+    flex: 1;
+    margin: 0 15px;
+}
+
+.leaderboard-name {
+    font-weight: bold;
+    color: #333;
+    font-size: 1.1em;
+}
+
+.leaderboard-stats {
+    font-size: 0.9em;
+    color: #666;
+    margin-top: 5px;
+}
+
+.leaderboard-profit {
+    font-size: 1.2em;
+    font-weight: bold;
+    min-width: 120px;
+    text-align: right;
+}
+
+.leaderboard-profit.positive {
+    color: #4caf50;
+}
+
+.leaderboard-profit.negative {
+    color: #f44336;
+}
+
+.empty-message {
+    text-align: center;
+    padding: 40px 20px;
+    color: #999;
+    font-size: 1.1em;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        padding: 20px;
+    }
+
+    .game-content {
+        grid-template-columns: 1fr;
+    }
+
+    .info-box {
+        grid-template-columns: 1fr;
+    }
+
+    .charts-container {
+        grid-template-columns: 1fr;
+    }
+
+    .chart-item {
+        min-height: 250px;
+    }
+
+    h1 {
+        font-size: 1.8em;
+    }
+}