@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

:root {
  --primary1: #7f5cff;
  --primary2: #22d3ee;
  --glass: rgba(255,255,255,0.07);
  --text: #e5e7eb;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body {
  background: linear-gradient(135deg, #0b0f2a, #1b1f3b);
  color: var(--text);
  scroll-behavior: smooth;
}

.container { max-width: 1200px; margin: 0 auto; }
section { padding: 100px 20px; }

h2 {
  text-align: center;
  margin-bottom: 50px;
  font-size: 36px;
  color: var(--primary2);
}

.hint { opacity: 0.8; margin-top: 12px; font-size: 0.95rem; }

/* Navbar */
.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding: 15px 50px;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
  z-index: 1000;
}
.navbar ul { display: flex; gap: 20px; list-style: none; }
.navbar a { color: var(--text); text-decoration: none; font-weight: 500; }
.logo {
  font-weight: 800;
  font-size: 24px;
  background: linear-gradient(90deg, var(--primary1), var(--primary2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; }
.hero-container {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 70px;
  align-items: center;
}
.hero h1 { font-size: 60px; }
.hero-image img{
  max-width: 100%;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Typing */
.typing{
  font-weight: 600;
  color: var(--primary2);
  margin: 15px 0;
  min-height: 26px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid var(--primary2);
  width: fit-content;
}

/* Buttons */
.btn {
  padding: 12px 28px;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--primary1), var(--primary2));
  color: #fff;
  font-weight: 600;
  transition: transform 0.2s, filter 0.2s;
}
.btn:hover { transform: scale(1.05); filter: brightness(1.1); }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.card {
  background: var(--glass);
  padding: 25px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Skills */
.skill { margin-bottom: 20px; }
.bar {
  height: 12px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
  overflow: hidden;
}
.bar div { height: 100%; background: linear-gradient(90deg, var(--primary1), var(--primary2)); }

/* Tags */
.tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.tags li { list-style: none; padding: 8px 14px; background: var(--glass); border-radius: 20px; }

/* Contacts */
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-box { background: var(--glass); padding: 30px; border-radius: 20px; }

#contactForm input, #contactForm textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.08);
  color: white;
}
#formStatus{ display: block; margin-top: 10px; font-weight: 600; }
.socials a { margin-right: 15px; color: var(--primary2); font-weight: 600; text-decoration: none; }

/* Tabs */
.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  gap: 10px;
  flex-wrap: wrap;
}
.tab-btn {
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  background: var(--glass);
  color: var(--text);
  cursor: pointer;
  transition: 0.3s;
  font-weight: 600;
}
.tab-btn.active {
  background: linear-gradient(90deg, var(--primary1), var(--primary2));
  color: #fff;
}
.tab-content {
  display: none;
  text-align: center;
  margin-top: 20px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 22px;
}
.tab-content.active { display: block; }

.stats{
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
  opacity: 0.95;
}

#guess-input {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.08);
  color: white;
  width: min(420px, 100%);
}

/* Reaction */
#reaction-field{
  position: relative;
  height: 320px;
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}
#reaction-target{
  position: absolute;
  display: none;
  padding: 10px 18px;
  border-radius: 999px;
  user-select: none;
}

/* TicTacToe */
.ttt-toggle{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 8px 0 14px;
  user-select: none;
}
.ttt-board{
  width: min(360px, 100%);
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ttt-cell{
  height: 110px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight: 800;
  font-size: 44px;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
.ttt-cell:hover{ transform: scale(1.02); filter: brightness(1.08); }
.ttt-cell:disabled{ cursor: not-allowed; opacity: 0.85; }
#ttt-status{ min-height: 22px; margin: 8px 0 12px; font-weight: 600; }

/* Maze */
.maze-wrap{
  display: flex;
  justify-content: center;
  margin: 10px 0 14px;
}
.maze-grid{
  --cell: 34px;
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
}
.maze-cell{
  width: var(--cell);
  height: var(--cell);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}
.maze-cell.wall{ background: rgba(0,0,0,0.55); border-color: rgba(0,0,0,0.35); }
.maze-cell.player{ background: linear-gradient(90deg, var(--primary1), var(--primary2)); }
.maze-cell.exit{ background: rgba(34, 197, 94, 0.85); border-color: rgba(34, 197, 94, 0.55); }
#maze-status{ min-height: 22px; margin: 8px 0 12px; font-weight: 600; }

/* Footer */
footer { text-align: center; padding: 20px; opacity: 0.7; }

/* ================= RPG STYLE ================= */

#rpg {
  padding-top: 120px;
}

.rpg-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 25px;
  backdrop-filter: blur(8px);
}

.rpg-card h3 {
  margin-bottom: 15px;
  color: var(--primary2);
}

#rpg input,
#rpg textarea,
#rpg select {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: white;
}

#rpg textarea {
  resize: vertical;
  min-height: 70px;
}

#addTaskBtn {
  width: 100%;
}

/* XP BAR */

.xp-bar {
  width: 100%;
  height: 18px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
  margin: 10px 0;
}

#xpFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #facc15, #22d3ee);
  transition: width 0.5s ease;
  border-radius: 20px;
}

/* TASK LIST */

#taskList {
  list-style: none;
  padding: 0;
}

#taskList li {
  background: rgba(0,0,0,0.3);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

#taskList button {
  background: #ef4444;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}

#taskList button:hover {
  background: #dc2626;
}

/* RESET BUTTON */

#resetAll {
  margin-top: 10px;
  width: 100%;
}

/* LEVEL UP ANIMATION */

@keyframes levelFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); color: #facc15; }
  100% { transform: scale(1); }
}

.level-up-effect {
  animation: levelFlash 0.6s ease;
}