/* Secrets: the console, toasts, effects and faction colours. */

/* Faction colours. html:root beats the seasonal and base tokens. */
html:root.alliance { --accent: #4e9bf0; --accent-ink: #04111f; --glow: rgba(78, 155, 240, .18); }
html:root.alliance[data-theme="light"] { --accent: #1f5fa8; --accent-ink: #fff; }
html:root.horde { --accent: #e5483c; --accent-ink: #1f0504; --glow: rgba(229, 72, 60, .2); }
html:root.horde[data-theme="light"] { --accent: #a82419; --accent-ink: #fff; }

/* Footer hint */
.sx-hint { background: none; border: 0; padding: 0; margin: 4px auto 0; font: inherit; font-family: var(--mono); font-size: .85rem; color: var(--muted); cursor: pointer; }
.sx-hint:hover { color: var(--accent); }
.sx-today { font-family: var(--mono); font-size: .85rem; }
.sx-coffee { cursor: pointer; display: inline-block; user-select: none; }
.sx-coffee:active { transform: scale(.9); }

/* Toast */
#sx-toast { position: fixed; left: 50%; top: 22px; transform: translate(-50%, -20px); opacity: 0; max-width: min(92vw, 560px); text-align: center; z-index: 80;
	padding: 12px 20px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font: 700 .95rem var(--mono); transition: .3s; pointer-events: none; }
#sx-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Console, in the spirit of the old Counter-Strike one */
#sx-console { position: fixed; inset: 0 0 auto 0; z-index: 90; height: min(60vh, 460px); display: none; flex-direction: column;
	background: rgba(8, 10, 8, .93); border-bottom: 2px solid var(--accent); font: 14px/1.5 var(--mono); color: #d4e8b0; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
#sx-console.open { display: flex; }
#sx-console .out { flex: 1; overflow-y: auto; padding: 12px 16px; white-space: pre-wrap; word-break: break-word; }
#sx-console .out .l-dim { color: #8a9a70; }
#sx-console .out .l-ok { color: #8be08b; }
#sx-console .out .l-hot { color: var(--accent); }
#sx-console form { display: flex; gap: 8px; align-items: center; padding: 8px 16px 12px; border-top: 1px solid #2b3326; }
#sx-console label { color: var(--accent); }
#sx-console input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #f0f7dc; font: inherit; font-size: 16px; caret-color: var(--accent); }
#sx-console .x { background: none; border: 1px solid #3a4533; color: #8a9a70; border-radius: 6px; font: inherit; padding: 2px 8px; cursor: pointer; }

/* Effects */
.sx-rain { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 70; }
.sx-rain span { position: absolute; top: -50px; animation: sx-drop linear forwards; }
@keyframes sx-drop { to { transform: translateY(115vh) rotate(var(--rot, 200deg)); } }
html.sx-shake body { animation: sx-shake .6s; }
@keyframes sx-shake { 0%, 100% { transform: none; } 15% { transform: translate(-8px, 3px); } 30% { transform: translate(7px, -4px); } 45% { transform: translate(-6px, -3px); } 60% { transform: translate(5px, 4px); } 80% { transform: translate(-3px, 2px); } }
html.sx-spin body { animation: sx-spin .9s ease-in-out; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.sx-shake body, html.sx-spin body { animation: none; } .sx-rain { display: none; } }