:root{
  --bg:#0d0d0d; --muted:rgba(255,255,255,0.85);
  --glass: rgba(25,25,25,0.65);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:white;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.app{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem}

/* editor */
textarea#scriptInput{
  width:min(980px,92%); height:40vh; background:rgba(255,255,255,0.04);
  color:var(--muted); border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;padding:16px;font-size:16px; resize:vertical;
}

/* display */
#displayText{display:none;width:min(980px,92%);height:65vh;overflow:hidden;position:relative}
#textContent{
  position:absolute;
  width:100%;
  left:0;
  top:0;
  transform-origin:center top; /* <-- changed */
  line-height:1.75;
  padding:8px
}

/* controls (responsive glass) */
.controls{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:env(safe-area-inset-bottom,12px);
  background:var(--glass); border:1px solid rgba(255,255,255,0.08);
  padding:clamp(6px,2vw,10px); gap:clamp(8px,2.5vw,14px);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  width:calc(100% - 20px); max-width:980px; border-radius:14px;
  box-shadow:0 6px 30px rgba(0,0,0,0.5); transition:opacity .28s, transform .28s;
  z-index:1000; pointer-events:auto;
}
.controls.hidden{opacity:0; transform:translate(-50%,6px); pointer-events:none}
.controls button, .controls label{background:none;border:0;color:var(--muted);cursor:pointer;font-size:0.95rem}
.controls label input{margin-left:6px}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:2000}
.modal[aria-hidden="false"]{display:flex}
.modal-panel{width:min(820px,94%);background:#0b0b0b;border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.05)}
.modal header{display:flex;justify-content:space-between;align-items:center}
.modal .modal-body{margin-top:10px}
.modal textarea{width:100%;height:120px;margin-top:8px;padding:10px;border-radius:8px;background:rgba(255,255,255,0.03);color:var(--muted);border:1px solid rgba(255,255,255,0.04)}
.list{list-style:none;padding:0;margin:0;max-height:220px;overflow:auto}
.list li{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid rgba(255,255,255,0.03)}
.list button{margin-left:8px}

/* small screens */
@media (max-width:480px){
  textarea#scriptInput{height:38vh}
  #displayText{height:62vh}
  .controls{padding:8px}
  .controls button{font-size:0.9rem}
  #textContent{padding:10px}
}

/* AUTH PANEL UI */
.auth-panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

.auth-panel[aria-hidden="false"] {
  display: flex;
}

.auth-card {
  background: #111;
  padding: 20px;
  border-radius: 12px;
  width: min(420px, 90%);
  border: 1px solid rgba(255,255,255,0.1);
}

.auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.auth-buttons button {
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: white;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
}

.auth-close {
  margin-top: 12px;
  background: none;
  color: rgba(255,255,255,0.5);
  border: 0;
  cursor: pointer;
}

/* Shortcut overlay (expanded full set) */
.shortcut-overlay {
  position: fixed;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 4000;
  max-width: calc(100% - 24px);
  padding: 6px;
  pointer-events: auto;
}
.shortcut-overlay button {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.06);
  color: white;
  font-size: 12px;
  padding: 6px 6px;
  border-radius: 8px;
  cursor: pointer;
  line-height:1;
  min-width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .08s, background .12s;
}
.shortcut-overlay button:hover { transform: translateY(-2px); background: rgba(255,255,255,0.14); }

/* tooltip */
.shortcut-overlay button:hover::after{
  content: attr(data-tip);
  position: absolute;
  top: 36px;
  right: 0;
  background: rgba(0,0,0,0.9);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  z-index:5000;
  pointer-events:none;
}

/* hide overlay slightly when playing to avoid distraction */
.shortcut-overlay.dim { opacity:0.28; transform: translateY(-4px); }

/* === RICH TEXT EDITOR STYLES === */

/* Toolbar Container */
.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.08);
  padding: 8px 12px;
  border-radius: 8px;
  width: min(980px, 92%);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Toolbar Buttons */
.toolbar button {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.toolbar button:hover { background: rgba(255,255,255,0.15); }

/* Main Editor (Replaces Textarea styles) */
.editor {
  width: min(980px,92%); 
  height: 40vh; 
  background: rgba(255,255,255,0.04);
  color: var(--muted); 
  color: rgba(255,255,255,0.9) !important;
  border-radius: 12px;
  padding: 16px;
  font-size: 16px; 
  overflow-y: auto;
  outline: none;
  white-space: pre-wrap; /* Important for keeping line breaks */
}

/* Modal Editor Specifics */
.modal-editor {
  height: 150px;
  margin-top: 8px;
  background: rgba(255,255,255,0.03);
  width: 100%;
}

/* Placeholder Logic for Divs */
.editor:empty:before {
  content: attr(placeholder);
  color: rgba(255,255,255,0.3);
  pointer-events: none;
  display: block;
}

/* COUNTDOWN OVERLAY */
.countdown-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15vw;
  font-weight: 800;
  color: white;
  z-index: 5000;
  pointer-events: none;
}

/* TIMER DISPLAY */
.time-display {
  font-family: monospace;
  font-size: 1.1rem;
  color: #00e5ff;
  background: rgba(0,0,0,0.3);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 60px;
  text-align: center;
}

/* Important: ensure text sits on top of highlighter */
#textContent {
  z-index: 2;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  /* Ensure stacking context for z-index to work */
  transform-style: preserve-3d; 
}

/* === NEW FEATURES === */

/* 1. Focus Guide / Eye-Line */
.focus-guide {
  position: fixed;
  top: 35%; /* Sweet spot for reading is usually top-third */
  left: 0; 
  right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 100;
  display: none; /* Hidden by default */
  border-top: 2px solid rgba(255, 0, 0, 0.5);
  border-bottom: 2px solid rgba(255, 0, 0, 0.5);
  background: rgba(255, 0, 0, 0.05); /* Very faint red tint */
}
/* Arrows on the side of the guide */
.focus-guide::before, .focus-guide::after {
  content: "▶";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 0, 0, 0.8);
  font-size: 20px;
}
.focus-guide::before { left: 10px; }
.focus-guide::after { right: 10px; content: "◀"; }

/* 2. Font Classes */
.font-serif {
  font-family: Georgia, "Times New Roman", Times, serif !important;
}
.font-mono {
  font-family: "Courier New", Courier, monospace !important;
}
/* Default is Sans (Inter) defined in body */

/* Ensure text box responds to width changes centered */
#displayText {
  margin: 0 auto; /* Center the box */
  transition: width 0.2s ease;
}