@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:         #0d0d0d;
  --bg2:        #111111;
  --bg3:        #161616;
  --border:     #2a2a2a;
  --text:       #d8d8d8;
  --text-dim:   #666666;
  --text-muted: #3a3a3a;
  --green:      #4caf72;
  --red:        #c0443a;
  --amber:      #c89b3c;
  --font-mono:  'Share Tech Mono', 'Courier New', monospace;
  --font-vt:    'VT323', monospace;
}

html, body {

    width: 100%; height: 100%;
    background: var(--bg); color: var(--text);
    font-family: var(--font-mono);
}

#grain-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; opacity: 0.035;}
.crt-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 998; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);}
.hidden {display: none !important;}

.game-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-shrink: 0; gap: 16px;
}

.header-left { display: flex;align-items: baseline; gap: 10px;}
.game-title {font-family: var(--font-vt); font-size: 26px; letter-spacing: 3px; color: var(--text);cursor: pointer;}
.game-subtitle {font-size: 11px; color: var(--text-dim);letter-spacing: 1px;}
.header-right{display: flex;align-items: center;gap: 14px;}

.identity-badge{
  display: flex; align-items: center;gap: 8px;
  background: var(--bg3); border: 1px solid var(--border);padding: 5px 12px;
  font-size: 12px; letter-spacing: 1px;
}
.identity-badge .nickname {color: var(--amber);}
.streak-chip {display: flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 12px;}
.streak-chip .flame {color:var(--amber)}
.streak-chip.hot .flame {color: var(--red);}

.btn {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px;
  background: transparent; color: var(--text); border: 1px solid var(--border);
  padding: 10px 20px; cursor: pointer; outline: none;
  transition: background .15s, border-color .15s, color .15s;
}

.btn:hover {background: var(--border); border-color: #444;}
.btn.primary {border-color: var(--green); color: var(--green)}
.btn.primary:hover {background: var(--green); color: #0d0d0d}
.btn.danger { border-color: var(--red); color: var(--red);}
.btn.danger:hover {background: var(--red); color: #0d0d0d;}
.btn.small {padding: 6px 12px; font-size: 11px;}
.btn:disabled {opacity: .35; cursor: not-allowed;}
.btn:disabled:hover {background: transparent; border-color: var(--border); color: var(--text);}

.app-wrapper {display: flex; flex-direction: column; height: 100vh; width: 100%;}
.screen{flex: 1; overflow: auto;}

.menu-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 28px; padding: 20px;
}
.menu-ascii { color: var(--text-dim); font-size: 11px; line-height: 1.3; white-space: pre; text-align: center; transform: translateX(-60px)}
.menu-heading {font-family: var(--font-vt); font-size: 40px; letter-spacing: 6px;}
.menu-tagline {font-size: 13px; color: var(--text-dim); letter-spacing: 3px; text-align: center;}
.menu-options {display: flex; flex-direction: column; gap: 10px; width: 280px;}
.menu-options .btn {text-align: left; padding: 14px 18px; font-size: 14px;}
.menu-options .btn .key-hint {float: right; color: var(--text-muted);}
.menu-footer-links {display: flex; gap: 18px; margin-top: 6px;}
.menu-footer-links a, .menu-footer-links span{ font-size: 14px; color: var(--text-muted); letter-spacing: 1px; cursor: pointer; text-decoration: none;}
.menu-footer-links span:hover {color: var(--text-dim);}

.difficulty-screen{display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 24px;}
.difficulty-cards {display: flex; gap: 10px;}
.diff-card{ width: 200px; border: 1px solid var(--border); background: var(--bg2); padding: 22px 18px; cursor: pointer; transition: border-color .15s, transform .1s;}
.diff-card:hover {transform: translateY(-2px);}
.diff-card[data-diff="easy"]:hover {border-color: var(--green);}
.diff-card[data-diff="medium"]:hover {border-color: var(--amber);}
.diff-card[data-diff="hard"]:hover {border-color: var(--red);}
.diff-name{font-family: var(--font-vt); font-size: 26px; letter-spacing: 3px; margin-bottom: 6px;}
.diff-card[data-diff="easy"] .diff-name {color: var(--green);}
.diff-card[data-diff="medium"] .diff-name {color: var(--amber);}
.diff-card[data-diff="hard"] .diff-name {color: var(--red);}
.diff-desc{font-size: 12px; color: var(--text-dim);line-height: 1.6;}
.diff-meta{margin-top: 12px; font-size: 11px; color: var(--text-muted);letter-spacing: 1px;}

.game-body{display: flex;flex: 1; overflow: hidden;height: calc(100vh - 49px);}
.save-section {display: flex; align-items: center; gap: 12px;}
.timer-wrap {display: flex; align-items: baseline; gap: 4px; background: var(--bg3); border: 1px solid var(--border); padding: 5px 10px;}
.timer-label {font-size: 10px; color: var(--text-dim); letter-spacing: 1px;} 
.timer-value {font-family: var(--font-vt); font-size: 20px; color: var(--amber); min-width: 28px; text-align: center; transition: color .2s;}
.timer-value.urgent {color: var(--red);  animation: pulse-red .5s infinite alternate;}
.timer-unit {font-size: 11px; color: var(--text-dim);}
@keyframes pulse-red { from {opacity: 1; } to {opacity: .4; } }

.rules-panel {width: 340px; min-width: 260px;display: flex;flex-direction: column; border-right: 1px solid var(--border); background: var(--bg2);overflow: hidden; flex-shrink: 0;}
.rules-header {display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;}
.rules-title {font-size: 11px; letter-spacing: 3px; color: var(--text-dim);}
.rules-progress {font-family: var(--font-vt); font-size: 18px; color: var(--text-dim);}
.rules-list {list-style: none; overflow-y: auto; flex: 1; padding: 6px 0;}
.rules-list::-webkit-scrollbar {width: 4px;}
.rules-list::-webkit-scrollbar-track {background: var(--bg2);}
.rules-list::-webkit-scrollbar-thumb {background: var(--border);}

.rule-item {display: flex; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--bg3); align-items: flex-start; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease;}
.rule-item.visible {opacity: 1; transform: translateY(0);}
.rule-num {font-family: var(--font-vt); font-size: 16px; color: var(--text-muted); min-width: 22px; line-height: 1.2; flex-shrink: 0;transition: color .3s;}
.rule-item.passed .rule-num {color: var(--green);}
.rule-item.failed .rule-num {color: var(--red);}
.rule-body {flex: 1;}
.rule-text{font-size: 12px; color: var(--text);line-height: 1.6;}
.rule-item.passed .rule-text{color: var(--text-dim);}
.rule-status{font-size: 11px;margin-top: 3px; letter-spacing: 1px;}
.rule-item.passed .rule-status {color: var(--green); }
.rule-item.failed .rule-status {color: var(--red); }
.rule-item.neutral .rule-status { color: var(--text-muted);}

.opponents-strip {display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border); }
.opponent-chip {font-size: 11px; padding: 4px 8px; border: 1px solid var(--border); color: var(--text-dim); }
.opponent-chip.done { color: var(--green); border-color: var(--green); }

.editor-panel {flex: 1; display: flex;flex-direction: column; overflow: hidden;}
.editor-topbar {display: flex;justify-content: space-between; align-items: center; padding: 7px 16px; border-bottom: 1px solid var(--border); background: var(--bg2); flex-shrink: 0;}
.editor-label{font-size: 11px; letter-spacing: 1px; color: var(--text-dim);}
.line-count{font-size: 11px; color: var(--text-muted);}
.editor-container {display: flex; flex: 1; overflow: hidden;}
.line-numbers { padding: 14px 10px 14px 14px; font-size: 13px; line-height: 1.6; color: var(--text-muted); text-align: right; background: var(--bg2); border-right: 1px solid var(--border); user-select: none; white-space: pre; overflow: hidden; flex-shrink: 0; min-width: 44px; }
.code-editor { flex: 1; padding: 14px 16px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--text); background: var(--bg); border: none; outline: none; resize: none; caret-color: var(--amber); overflow-y: auto; white-space: pre; overflow-wrap: normal; tab-size: 4; }
.code-editor::placeholder {color: var(--text-muted);}
.code-editor::-webkit-scrollbar {width: 6px; height: 6px;}
.code-editor::-webkit-scrollbar-track {background: var(--bg);}
.code-editor::-webkit-scrollbar-thumb {background: var(--border);}
.code-editor.destroying {caret-color:var(--red)}

.success-screen {position: fixed; inset: 0; background: var(--bg); z-index: 1000; display: flex; align-items: center; justify-content: center;}
.success-inner{text-align: center; max-width: 480px; padding: 40px 20px;}
.success-blink{font-size: 32px; color: var(--green); animation: blink .5s step-end infinite; margin-bottom: 24px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.success-title { font-family: var(--font-vt); font-size: 40px; letter-spacing: 5px; margin-bottom: 10px;}
.success-divider {height: 1px; background: var(--border); margin: 10px auto; width: 80%;}
.success-label {font-family: var(--font-vt); font-size: 30px; letter-spacing: 8px; color: var(--green); margin-bottom: 14px;}
.success-msg {font-size: 13px; color: var(--text-dim); line-height: 1.8;}
.success-stats {display: flex; justify-content: center;gap: 26px; margin: 18px 0; font-size: 12px; color: var(--text-dim);}
.success-stats b {color: var(--amber); font-family: var(--font-vt); font-size: 20px; display: block;}
.success-actions {display: flex; gap: 10px; justify-content: center; margin-top: 24px;}

.lobby-screen {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 22px; padding: 20px;}
.lobby-box {width: 380px; border: 1px solid var(--border); background: var(--bg2); padding: 24px;}
.lobby-box h2 {font-family: var(--font-vt); font-size: 22px;letter-spacing: 3px; margin-bottom: 16px; color: var(--text-dim);}
.lobby-input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); padding: 10px 12px; font-size: 14px; letter-spacing: 2px; outline: none; margin-bottom: 12px; }
.lobby-input:focus {border-color: var(--amber);}
.room-code-display {font-family: var(--font-vt); font-size: 42px; letter-spacing: 10px; color: var(--amber); text-align: center;margin: 10px 0;}
.player-list {list-style: none; margin: 14px 0;}
.player-list li {display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--bg3); font-size: 13px;}
.player-list li .status {color: var(--green); font-size: 11px;}
.lobby-actions {display: flex; gap: 10px;}
.error-text {color: var(--red); font-size: 12px; margin-top: -6px; margin-bottom: 10px; min-height: 14px;}

.leaderboard-screen {display: flex; flex-direction: column;align-items: center; height: 100%; padding: 30px 20px; overflow-y: auto;}
.lb-tabs{display: flex; gap: 8px; margin-bottom: 18px;}
.lb-tab {padding: 8px 16px; border: 1px solid var(--border); font-size: 12px; letter-spacing: 1px; cursor: pointer; color: var(--text-dim);}
.lb-tab.active{color: var(--amber); border-color: var(--amber);}
.lb-table{width: 100%; max-width: 700px; border-collapse: collapse;font-size: 13px;}
.lb-table th {text-align: left;color: var(--text-dim); font-size: 11px;letter-spacing: 1px;padding: 8px 12px; border-bottom: 1px solid var(--border);}
.lb-table td { padding: 9px 12px; border-bottom: 1px solid var(--bg3); }
.lb-table tr.you { background: var(--bg3); }
.lb-rank { font-family: var(--font-vt); font-size: 18px; color: var(--text-muted); }
.lb-rank.top1 { color: var(--amber); }
.lb-rank.top2 { color: var(--text); }
.lb-rank.top3 { color: #a0703a; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 1100; display: flex; align-items: center; justify-content: center; }
.modal-box { width: 420px; border: 1px solid var(--border); background: var(--bg2); padding: 28px; text-align: center; }
.modal-box h2 { font-family: var(--font-vt); font-size: 26px; letter-spacing: 3px; margin-bottom: 12px; }
.modal-box p { font-size: 13px; color: var(--text-dim); line-height: 1.7; margin-bottom: 22px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
 
.tutorial-overlay { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.tutorial-dim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.75);
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%); /* replaced dynamically with a cutout */
  pointer-events: auto;
}
.tutorial-highlight-ring {
  position: absolute; border: 2px solid var(--amber);
  box-shadow: 0 0 0 4000px rgba(0,0,0,.75), 0 0 18px rgba(200,155,60,.6);
  transition: all .25s ease; pointer-events: none;
}
.tutorial-tooltip {
  position: absolute; width: 260px; background: var(--bg2); border: 1px solid var(--amber);
  padding: 16px; pointer-events: auto; transition: all .25s ease;
}
.tutorial-tooltip .tt-step { font-size: 10px; color: var(--text-muted); letter-spacing: 2px; margin-bottom: 6px; }
.tutorial-tooltip .tt-title { font-family: var(--font-vt); font-size: 20px; color: var(--amber); margin-bottom: 8px; letter-spacing: 1px; }
.tutorial-tooltip .tt-body { font-size: 12px; color: var(--text); line-height: 1.6; margin-bottom: 14px; }
.tutorial-tooltip .tt-actions { display: flex; justify-content: space-between; align-items: center; }
.tt-skip { font-size: 11px; color: var(--text-muted); cursor: pointer; letter-spacing: 1px; }
.tt-skip:hover { color: var(--text-dim); }
 
@media (max-width: 720px) {
  .game-body { flex-direction: column; }
  .rules-panel { width: 100%; max-height: 220px; border-right: none; border-bottom: 1px solid var(--border); }
  .difficulty-cards { flex-direction: column; }
  .tutorial-tooltip { width: 220px; }
}