@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #0d0d2b;
  background-image: 
    radial-gradient(ellipse at 20% 50%, rgba(30, 30, 80, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(40, 20, 60, 0.4) 0%, transparent 50%),
    radial-gradient(1px 1px at 10% 10%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 30% 25%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 50% 15%, #ccccff 1px, transparent 0),
    radial-gradient(1px 1px at 70% 35%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 90% 20%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 15% 45%, #ccccff 1px, transparent 0),
    radial-gradient(1px 1px at 25% 60%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 45% 50%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 65% 55%, #ccccff 1px, transparent 0),
    radial-gradient(1px 1px at 85% 45%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 5% 75%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 35% 80%, #ccccff 1px, transparent 0),
    radial-gradient(1px 1px at 55% 70%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 75% 85%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 95% 75%, #ccccff 1px, transparent 0),
    radial-gradient(1px 1px at 20% 90%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 60% 95%, #ffffff 1px, transparent 0),
    radial-gradient(1px 1px at 80% 5%, #ffffff 1px, transparent 0);
  background-size: 100% 100%;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 11px;
  color: #333333;
  min-height: 100vh;
}

@keyframes sparkle1 {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes sparkle2 {
  0%, 100% { opacity: 0.2; }
  33% { opacity: 1; }
  66% { opacity: 0; }
}
@keyframes sparkle3 {
  0%, 100% { opacity: 0; }
  25% { opacity: 0.8; }
  75% { opacity: 0.3; }
}
@keyframes blink {
  0%, 49% { visibility: visible; }
  50%, 100% { visibility: hidden; }
}
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(204, 153, 0, 0.3); }
  50% { text-shadow: 0 0 15px rgba(204, 153, 0, 0.8), 0 0 25px rgba(204, 153, 0, 0.4); }
}
@keyframes typing-cursor {
  0%, 100% { border-right-color: #cc9900; }
  50% { border-right-color: transparent; }
}

.sparkle {
  position: absolute;
  font-size: 10px;
  color: #ffdd44;
  pointer-events: none;
}
.sparkle-1 { animation: sparkle1 1.5s infinite; }
.sparkle-2 { animation: sparkle2 2s infinite 0.3s; }
.sparkle-3 { animation: sparkle3 1.8s infinite 0.7s; }
.sparkle-4 { animation: sparkle1 2.2s infinite 1s; }
.sparkle-5 { animation: sparkle2 1.3s infinite 0.5s; }

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  background: #cc0000;
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 0;
  border: 1px solid #990000;
}
.marquee-text {
  display: inline-block;
  animation: marquee 20s linear infinite;
}

.blink-text {
  animation: blink 1s step-start infinite;
  color: #ff0000;
  font-weight: bold;
}

.new-badge {
  background: #ff0000;
  color: #ffffff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  margin-left: 4px;
  vertical-align: super;
  border: 1px solid #cc0000;
}

a {
  color: #0000cc;
  text-decoration: underline;
}
a:visited {
  color: #663399;
}
a:hover {
  color: #0033ff;
}

.outer-wrapper {
  width: 780px;
  margin: 10px auto;
  border: 3px solid #666699;
  background: #1a1a3e;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.header-banner {
  background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 40%, #1a0a2e 100%);
  border-bottom: 2px solid #cc9900;
  padding: 15px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.header-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #cc9900, transparent);
}

.logo-text {
  font-family: 'MedievalSharp', cursive;
  font-size: 42px;
  color: #cc9900;
  text-shadow: 2px 2px 0 #000000, 0 0 10px rgba(204, 153, 0, 0.5);
  letter-spacing: 3px;
  animation: pulse-glow 3s ease-in-out infinite;
}
.tagline {
  font-family: Verdana, sans-serif;
  font-size: 11px;
  color: #aaa;
  font-style: italic;
  margin-top: 2px;
  letter-spacing: 2px;
}
.beta-badge {
  display: inline-block;
  background: #cc0000;
  color: #fff;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  margin-left: 8px;
  border: 1px outset #ff3333;
  vertical-align: super;
}

.nav-bar {
  background: linear-gradient(180deg, #336699, #224466);
  border-bottom: 1px solid #113355;
  border-top: 1px solid #4488bb;
  padding: 4px 10px;
  text-align: center;
}
.nav-bar a, .nav-bar span {
  color: #ffffff;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  cursor: pointer;
}
.nav-bar a:hover, .nav-bar span:hover {
  color: #ffcc00;
  text-decoration: underline;
}
.nav-bar .nav-sep {
  color: #88aacc;
  padding: 0 2px;
  cursor: default;
}
.nav-bar .nav-active {
  background: #113355;
  border: 1px inset #224466;
  padding: 2px 7px;
}

.main-layout {
  display: flex;
  min-height: 500px;
}

.sidebar {
  width: 180px;
  min-width: 180px;
  background: #f0ead6;
  border-right: 1px solid #999;
  padding: 8px;
  font-size: 11px;
}
.sidebar-section {
  border: 1px solid #999;
  margin-bottom: 8px;
  background: #fff;
}
.sidebar-section-title {
  background: linear-gradient(180deg, #666699, #444466);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 3px 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sidebar-section-body {
  padding: 6px;
  font-size: 10px;
  line-height: 1.6;
}
.sidebar-section-body a {
  display: block;
  font-size: 10px;
  padding: 1px 0;
}

.content-area {
  flex: 1;
  background: #f5f0e0;
  padding: 10px 15px;
  overflow: hidden;
}

.content-title {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #003366;
  border-bottom: 2px solid #cc9900;
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.form-container {
  background: #faf5e8;
  border: 1px solid #999;
  padding: 10px;
  margin-bottom: 10px;
}
.form-row {
  margin-bottom: 8px;
}
.form-label {
  display: block;
  font-weight: bold;
  font-size: 11px;
  color: #333;
  margin-bottom: 2px;
}
.form-input {
  font-family: Verdana, sans-serif;
  font-size: 11px;
  border: 2px inset #ccc;
  padding: 3px 5px;
  background: #fff;
  width: 100%;
}
.form-input:focus {
  background: #fffff0;
}
.form-select {
  font-family: Verdana, sans-serif;
  font-size: 11px;
  border: 2px inset #ccc;
  padding: 2px;
  background: #fff;
}
.form-textarea {
  font-family: Verdana, sans-serif;
  font-size: 11px;
  border: 2px inset #ccc;
  padding: 4px;
  background: #fff;
  width: 100%;
  resize: vertical;
}

.btn {
  font-family: Verdana, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 12px;
  border: 2px outset #ccc;
  cursor: pointer;
  margin-right: 4px;
}
.btn:active {
  border-style: inset;
}
.btn-primary {
  background: linear-gradient(180deg, #4488cc, #336699);
  color: #fff;
  border-color: #4488cc;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #5599dd, #4488cc);
}
.btn-gold {
  background: linear-gradient(180deg, #ddaa33, #cc9900);
  color: #fff;
  border-color: #ddaa33;
}
.btn-gold:hover {
  background: linear-gradient(180deg, #eebb44, #ddaa33);
}
.btn-danger {
  background: linear-gradient(180deg, #cc4444, #993333);
  color: #fff;
  border-color: #cc4444;
}
.btn-small {
  font-size: 10px;
  padding: 2px 8px;
}
.btn-action {
  background: linear-gradient(180deg, #668833, #446622);
  color: #fff;
  border-color: #668833;
  font-size: 10px;
  padding: 3px 8px;
  margin: 2px;
}
.btn-action:hover {
  background: linear-gradient(180deg, #779944, #668833);
}

.story-display {
  background: #fffef5;
  border: 2px inset #999;
  padding: 10px;
  min-height: 250px;
  max-height: 400px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.7;
  color: #222;
  margin-bottom: 8px;
  font-family: Georgia, 'Times New Roman', serif;
}
.story-narration {
  margin-bottom: 10px;
  text-indent: 20px;
}
.story-action {
  margin-bottom: 10px;
  color: #003399;
  font-style: italic;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  font-size: 11px;
  text-indent: 0;
  padding-left: 10px;
  border-left: 3px solid #003399;
}

.story-stats-box {
  background: #f0ead6;
  border: 1px solid #999;
  padding: 6px;
  font-size: 10px;
  margin-bottom: 8px;
}
.story-stats-box table {
  width: 100%;
}
.story-stats-box td {
  padding: 1px 4px;
}
.story-stats-box .stat-label {
  font-weight: bold;
  color: #666;
  width: 100px;
}
.story-stats-box .stat-value {
  color: #003366;
  font-weight: bold;
}

.action-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.action-input-row {
  display: flex;
  gap: 4px;
}
.action-input-row input {
  flex: 1;
}

.adventures-list {
  border: 1px solid #999;
}
.adventures-list-header {
  background: linear-gradient(180deg, #666699, #444466);
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  padding: 4px 6px;
  display: flex;
}
.adventures-list-header span {
  padding: 0 4px;
}
.adventure-row {
  display: flex;
  align-items: center;
  padding: 5px 6px;
  border-bottom: 1px solid #ddd;
  font-size: 11px;
  background: #fff;
}
.adventure-row:nth-child(even) {
  background: #f5f5f0;
}

.hall-entry {
  border: 1px solid #cc9900;
  background: #fffef5;
  padding: 8px;
  margin-bottom: 8px;
}
.hall-entry-title {
  font-weight: bold;
  font-size: 13px;
  color: #663300;
}
.hall-entry-meta {
  font-size: 10px;
  color: #999;
  margin-bottom: 4px;
}
.hall-entry-excerpt {
  font-size: 11px;
  font-style: italic;
  color: #555;
}

.seeds-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.seed-card {
  border: 1px solid #999;
  background: #fff;
  padding: 8px;
  width: 250px;
  cursor: pointer;
}
.seed-card:hover {
  background: #fffff0;
  border-color: #cc9900;
}
.seed-card-title {
  font-weight: bold;
  font-size: 12px;
  color: #003366;
  margin-bottom: 3px;
}
.seed-card-genre {
  font-size: 9px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.seed-card-desc {
  font-size: 10px;
  color: #555;
}

.poll-section {
  background: #fff;
  border: 1px solid #999;
  padding: 8px;
  margin-bottom: 8px;
}
.poll-option {
  display: block;
  padding: 2px 0;
  font-size: 11px;
}
.poll-option input {
  margin-right: 4px;
}

.news-entry {
  border-bottom: 1px dotted #ccc;
  padding: 6px 0;
  margin-bottom: 4px;
}
.news-date {
  font-size: 9px;
  color: #999;
  font-weight: bold;
}
.news-title {
  font-weight: bold;
  font-size: 12px;
  color: #003366;
}
.news-body {
  font-size: 11px;
  color: #444;
  margin-top: 2px;
}

.footer {
  background: linear-gradient(180deg, #222244, #111133);
  border-top: 2px solid #cc9900;
  padding: 10px 15px;
  text-align: center;
  color: #888;
  font-size: 9px;
  line-height: 1.8;
}
.footer a {
  color: #8888cc;
  font-size: 9px;
}
.footer .hit-counter {
  background: #000;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 2px 8px;
  border: 1px inset #333;
  display: inline-block;
  margin: 4px 0;
}
.footer .browser-notice {
  color: #666;
  font-size: 8px;
  margin-top: 4px;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

.powered-badge {
  background: #eee;
  border: 1px solid #ccc;
  padding: 3px 6px;
  font-size: 9px;
  color: #666;
  text-align: center;
  margin-top: 4px;
}

.genre-icon {
  display: inline-block;
  width: 16px;
  text-align: center;
  margin-right: 3px;
}

.loading-overlay {
  text-align: center;
  padding: 20px;
  font-style: italic;
  color: #666;
  font-size: 12px;
}
.loading-overlay .quill-animation {
  display: inline-block;
  animation: sparkle1 1s infinite;
  font-size: 18px;
  margin-bottom: 8px;
}

.difficulty-casual { color: #336633; }
.difficulty-adventurer { color: #cc9900; }
.difficulty-legendary { color: #cc0000; }