@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Orbitron:wght@500;700&display=swap');

/**
 * =============================================================================
 * This is the file where all your styling should go in.
 * Instead of modifying the styles found in the monogatari.css file or others,
 * you should overwrite those styles in this file.
 *
 * The CSS selectors shown are not an extensive list but they are the most
 * common you might want to change. To find what other elements are available,
 * you can take a look at the monogatari.css file or use your browser's dev
 * tools to inspect the elements.
 * =============================================================================
**/

/**
 * ===========================
 * General Styling
 * ===========================
**/

/* Placeholder styles removed to avoid empty ruleset diagnostics. */

/** Medium Screens, Phablets (601px) **/
@media screen and (min-width: 37.56255em) {
  /* Styles for the desktop version of the Quick Menu */
}

/** Medium Devices, Tablets (992px)**/
@media screen and (min-width: 62em) {
}

/** HD Screen, Large Devices, Wide Screens, Desktop (1200px) **/
@media screen and (min-width: 75em) {
}

/** Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) **/
@media screen and (min-width: 120em) {
}

/** Retina Screen , Large Devices, Wide Screens(2560px) **/
@media screen and (min-width: 160em) {
}

/** 4k Screens, Large Devices, Wide Screens (3840px) **/
@media screen and (min-width: 240em) {
}

/** 5k Screens, Large Devices, Wide Screens (5000px) **/
@media screen and (min-width: 312.5em) {
}

/** 8k Screens, Large Devices, Wide Screens (8000px) **/
@media screen and (min-width: 500em) {
}

/* ===========================
   Cyber-Goth Theme Overrides
   =========================== */
body {
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: #e0e0e0;
  font-family: 'Orbitron', 'Audiowide', 'Poppins', Arial, sans-serif;
  letter-spacing: 1.5px;
}

h1, h2, h3, .main-title, .logo {
  color: #999999;
  text-shadow: 0 0 8px #666666, 0 0 16px #888888;
  font-family: 'Orbitron', 'Audiowide', 'Poppins', Arial, sans-serif;
  letter-spacing: 2px;
}

button, .hero-button, [data-screen="main"] button {
  background: linear-gradient(90deg, #777777 0%, #555555 100%);
  color: #fff;
  border: 2px solid #888888;
  border-radius: 8px;
  box-shadow: 0 0 10px #666666, 0 0 20px #777777 inset;
  font-family: 'Orbitron', 'Audiowide', 'Poppins', Arial, sans-serif;
  font-size: 1.1rem;
  padding: 14px 36px;
  margin: 10px 0;
  transition: box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
button:hover, .hero-button:hover, [data-screen="main"] button:hover {
  box-shadow: 0 0 20px #888888, 0 0 40px #666666;
  border-color: #777777;
  background: linear-gradient(90deg, #555555 0%, #777777 100%);
}

[data-screen] {
  background: rgba(20, 20, 40, 0.85);
  border-radius: 16px;
  box-shadow: 0 0 40px #888888 inset;
}

/* Neon border for main menu */
[data-screen="main"] {
  border: 3px solid #777777;
  box-shadow: 0 0 30px #777777, 0 0 60px #888888 inset;
}

/* Neon effect for quick menu */
[data-component="quick-menu"] {
  background: rgba(0,0,0,0.7);
  border: 2px solid #888888;
  box-shadow: 0 0 10px #888888;
}

/* ===========================
   UPDATED TEXT BOX STYLING
   =========================== */
/* ===========================
   UPDATED TEXT BOX STYLING (TEXT ONLY)
   =========================== */
[data-component="text-box"] {
    background: transparent !important; /* Removes the dark box */
    border: none !important; /* Removes all outer borders */
    box-shadow: none !important; /* Removes the neon glow */
    color: #fff !important; /* Keeps your text white */
    
    /* Adds a subtle drop shadow to the text itself so it remains readable 
       even if it overlaps with bright lights or white walls in your render */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important; 
}

/* Removes the separator line under the character's name */
/* Removes the violet background and cyan border from the character name tag */
[data-ui="who"],
text-box [data-content="character-name"],
[data-component="text-box"] [data-content="character-name"] {
    background: transparent !important; /* Removes the violet box */
    border: none !important; /* Removes the cyan line */
    box-shadow: none !important;
    padding: 0 !important; /* Removes extra spacing where the box used to be */
    
    /* Strong text shadow to keep the name readable against light backgrounds */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) !important; 
}
/* Custom Monogatari UI override for the neon workspace aesthetic */
html, body {
  min-height: 100%;
  background: radial-gradient(circle at top, rgba(60, 60, 60, 0.28), transparent 24%), radial-gradient(circle at 88% 12%, rgba(120, 120, 120, 0.16), transparent 20%), #05030d;
  color: #f3f3ff;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(100,100,100,0.02), rgba(100,100,100,0.02) 1px, transparent 1px, transparent 24px), repeating-linear-gradient(90deg, rgba(100,100,100,0.02), rgba(100,100,100,0.02) 1px, transparent 1px, transparent 24px);
}
#monogatari {
  min-height: 100vh;
  position: relative;
}
#monogatari::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(100, 100, 100, 0.18), transparent 22%), radial-gradient(circle at 82% 12%, rgba(120, 120, 120, 0.16), transparent 18%);
  pointer-events: none;
}
[data-screen] {
  background: rgba(8, 4, 18, 0.92) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(22px) !important;
  box-shadow: 0 0 120px rgba(100, 100, 100, 0.12), inset 0 0 1px rgba(255, 255, 255, 0.03) !important;
}
[data-screen="main"] {
  border-color: rgba(120, 120, 120, 0.6) !important;
  box-shadow: 0 0 34px rgba(120, 120, 120, 0.28), inset 0 0 72px rgba(80, 80, 80, 0.22) !important;
}
[data-screen="main"] button,
button {
  background: linear-gradient(135deg, rgba(120, 120, 120, 0.96), rgba(80, 80, 80, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 16px !important;
  color: #f5f5ff !important;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 14px 28px;
  box-shadow: 0 0 36px rgba(100, 100, 100, 0.18);
}
button:hover,
[data-screen="main"] button:hover {
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.98), rgba(120, 120, 120, 0.96));
  box-shadow: 0 0 30px rgba(120, 120, 120, 0.45), 0 0 18px rgba(100, 100, 100, 0.2);
}
[data-ui="who"] {
  color: #000000 !important;
  text-shadow: none !important;
  font-family: 'Orbitron', 'Audiowide', sans-serif !important;
}
alert-modal input[type="text"] {
  color: #000000 !important;
  background: rgba(40, 30, 80, 0.6) !important;
}
[data-component="quick-menu"] {
  background: rgba(8, 8, 22, 0.88) !important;
  border: 1px solid rgba(100, 100, 100, 0.42) !important;
  box-shadow: 0 0 28px rgba(120, 120, 120, 0.12) !important;
  border-radius: 18px !important;
}
[data-component="quick-menu"] span {
  color: #ffffff !important;
}
[data-component="quick-menu"] span:hover {
  color: #aaaaaa !important;
}
[data-component="quick-menu"] > span > .fa {
  color: #999999 !important;
}
[data-component="choice-container"] button {
  border-radius: 18px !important;
  padding: 16px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
}
[data-component="choice-container"] button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 25px rgba(120, 120, 120, 0.22);
}
[data-component="save-slot"] figure,
[data-component="save-slot"] figcaption {
  color: #e7e7ff !important;
}
[data-component="save-slot"] img {
  border: 1px solid rgba(100, 100, 100, 0.35) !important;
  border-radius: 18px !important;
}
[data-screen="game"] [data-character] {
  filter: saturate(1.05) contrast(1.05) !important;
}
[data-screen="game"] [data-image] {
  filter: brightness(1.02) saturate(1.08) !important;
}
/* ===========================
   MAIN MENU (Bulletproof Grey Pill)
   =========================== */
main-screen {
  position: relative !important;
  justify-content: center !important;
  align-items: center !important;
}

main-screen.active,
[data-screen="main"].active {
  display: flex !important;
}

main-menu {
    position: absolute !important;
    bottom: 30px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important; /* Perfectly centers it horizontally */
    
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Forces buttons to a new line if screen is too small */
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important; 
    
    width: fit-content !important;
    max-width: 95vw !important; /* Prevents it from going off-screen */
    padding: 15px 25px !important;
    
    /* Clean Grey Glass Background */
    background: rgba(40, 40, 45, 0.65) !important; 
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    
    /* Subtle Grey Borders */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50px !important; 
    
    /* Force completely dark shadow, overriding purple */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 
                inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

/* Strip out all generated text */
main-menu::before, 
main-menu::after {
    display: none !important;
    content: "" !important;
}

main-menu button {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 12px 24px !important;
    
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    
    /* Sleek Dark Grey Button */
    background: rgba(50, 50, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 25px !important; 
    
    /* ULTIMATE PURPLE KILLER */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8) !important;
    text-shadow: none !important;
    transition: all 0.3s ease !important;
}

main-menu button:hover,
main-menu button:focus {
    transform: translateY(-3px) !important;
    background: rgba(80, 80, 80, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    /* ULTIMATE PURPLE KILLER (Hover state) */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.9), 
                0 0 12px rgba(255, 255, 255, 0.2) !important; 
}

main-menu button .fas,
main-menu button [data-icon] {
    display: none !important;
}

main-menu button [data-string] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
@media screen and (max-width: 640px) {
  main-menu {
    width: min(100%, 100vw) !important;
    padding: 1.6rem 1.4rem !important;
    border-radius: 34px !important;
  }
  main-menu button {
    min-height: 4.2rem !important;
    padding: 1rem 1rem !important;
  }
}









/* The Glassmorphism Container (Applies only when our specific buttons are present) */
[data-ui="choices"]:has(.top-menu-btn) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    
    /* Placement at the top */
    position: absolute;
    top: 10%; 
    left: 50%;
    transform: translateX(-50%);
    
    /* Recreating the look from image_209e2d.png */
    background: linear-gradient(90deg, rgba(30, 45, 90, 0.7), rgba(80, 110, 180, 0.5), rgba(30, 45, 90, 0.7));
    backdrop-filter: blur(8px);
    padding: 15px 30px;
    border-radius: 50px; 
    width: max-content;
    max-width: 95%;
}

/* The Buttons Inside */
button.top-menu-btn {
    background-color: #1e223d; /* Dark slate blue */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 25px;
    border-radius: 10px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

button.top-menu-btn:hover {
    background-color: #3b447a;
    transform: translateY(-2px);
    cursor: pointer;
}










/* The Glassmorphism Container */
[data-ui="choices"]:has(.top-menu-btn) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    
    /* Placement at the top */
    position: absolute !important;
    top: 5% !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    
    /* The Glass Look */
    background: linear-gradient(90deg, rgba(30, 45, 90, 0.7), rgba(80, 110, 180, 0.5), rgba(30, 45, 90, 0.7)) !important;
    backdrop-filter: blur(8px) !important;
    padding: 15px 30px !important;
    border-radius: 50px !important; 
    width: max-content !important;
    max-width: 95% !important;
}

/* The Buttons Inside */
[data-ui="choices"] button.top-menu-btn {
    background-color: #1e223d !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 25px !important;
    border-radius: 10px !important;
    font-family: sans-serif !important;
    font-weight: bold !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
    margin: 0 !important; /* Removes default vertical spacing */
}

[data-ui="choices"] button.top-menu-btn:hover {
    background-color: #3b447a !important;
    transform: translateY(-2px) !important;
    cursor: pointer !important;
}















/* Custom Portfolio Note Card - Cuter & Nature Themed! */
.portfolio-note-card {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 480px;
    padding: 20px 30px;
    z-index: 100;
    
    /* Softer, greener glass effect to match the background */
    background: rgba(25, 45, 30, 0.55); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    /* Rounded, organic borders for a cuter look */
    border: 2px solid rgba(130, 190, 140, 0.3);
    border-top: 2px solid rgba(180, 220, 190, 0.5);
    border-radius: 30px; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 
                inset 0 0 20px rgba(130, 190, 140, 0.1);
    
    /* Typography */
    color: #e8f5e9; /* Soft minty white */
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); 
    
    /* Animation */
    opacity: 0;
    animation: gentleFloatIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

/* 🌿 Cute Leaf Corner Decorations! 🌿 */
.portfolio-note-card::before,
.portfolio-note-card::after {
    content: "";
    position: absolute;
    width: 45px;
    height: 45px;
    background-size: contain;
    background-repeat: no-repeat;
    /* This creates an ivy leaf directly in the code without needing an image file! */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235c8753'%3E%3Cpath d='M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C14,6.25 16.5,7 17,8Z'/%3E%3C/svg%3E");
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.6));
}

/* Top Left Leaf */
.portfolio-note-card::before {
    top: -18px;
    left: -12px;
    transform: rotate(-25deg);
}

/* Bottom Right Leaf (Slightly smaller) */
.portfolio-note-card::after {
    bottom: -18px;
    right: -12px;
    transform: rotate(155deg) scale(0.85);
}

/* Make the bold words pop with a cute mint green! */
.portfolio-note-card b, 
.portfolio-note-card strong {
    color: #a5d6a7; 
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Smooth entry animation */
@keyframes gentleFloatIn {
    0% { opacity: 0; transform: translate(-50%, 20px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

/* Hide the note once the game starts playing */
[data-screen="game"] .portfolio-note-card {
    display: none;
}