:root {
   --bg: #090b13;
   --bg-deep: #050609;
   --panel: #12162a;
   --panel-2: #171c34;
   --panel-3: #1e2440;
   --border: #333e6b;
   --border-soft: #242c4d;
   --gold: #e3bd57;
   --gold-dim: #7a6530;
   --text: #e7e4d6;
   --text-dim: #8b91b5;
   --teal: #35e0c4;
   --blue: #5aa7ff;
   --red: #ff5d68;
   --purple: #b98af5;
   --font-display: 'Press Start 2P', monospace;
   --font-body: 'JetBrains Mono', monospace;
   --radius: 2px;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html,
body {
   height: 100%;
   background: var(--bg);
   color: var(--text);
   font-family: var(--font-body);
   overflow-x: hidden;
}

::selection {
   background: var(--gold);
   color: #111;
}

*:focus-visible {
   outline: 2px solid var(--gold);
   outline-offset: 2px;
}

button,
a {
   font-family: inherit;
   color: inherit;
}

/* ---------- BACKGROUND ---------- */
#bg-canvas {
   position: fixed;
   inset: 0;
   z-index: 0;
   background:
      radial-gradient(ellipse 80% 60% at 50% -10%, #1a2140 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 100% 100%, #1c1330 0%, transparent 55%),
      var(--bg-deep);
}

/* ---------- BOOT SCREEN ---------- */
#boot {
   position: fixed;
   inset: 0;
   z-index: 100;
   background: #020203;
   color: #7dffb0;
   font-family: var(--font-body);
   padding: 8vh 6vw;
   display: flex;
   flex-direction: column;
   gap: 10px;
   font-size: 14px;
   transition: opacity .6s ease, visibility .6s ease;
}

#boot.hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

#boot .line {
   opacity: 0;
   white-space: pre-wrap;
   line-height: 1.6;
   transition: opacity .55s ease;
}

#boot .line.show {
   opacity: 1;
}

#boot .caret {
   display: inline-block;
   width: 8px;
   height: 14px;
   background: #7dffb0;
   margin-left: 2px;
   animation: blink 1.6s ease-in-out infinite;
   vertical-align: -2px;
}

#boot-start {
   margin-top: auto;
   text-align: center;
   font-family: var(--font-display);
   font-size: 11px;
   color: var(--gold);
   letter-spacing: 1px;
   opacity: 0;
   animation: blink 1.8s ease-in-out infinite;
}

#boot-start.show {
   opacity: 1;
}

@keyframes blink {
   50% {
      opacity: .15;
   }
}

/* ---------- APP SHELL ---------- */
#app {
   position: relative;
   z-index: 1;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   opacity: 0;
   transition: opacity .8s ease;
}

#app.ready {
   opacity: 1;
}

header.topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px clamp(16px, 4vw, 40px);
   border-bottom: 1px solid var(--border-soft);
   background: rgba(9, 11, 19, .6);
   backdrop-filter: blur(6px);
   position: sticky;
   top: 0;
   z-index: 20;
}

.brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-family: var(--font-display);
   font-size: 11px;
   color: var(--gold);
   letter-spacing: 1px;
}

.brand .dot {
   width: 7px;
   height: 7px;
   background: var(--teal);
   border-radius: 50%;
   box-shadow: 0 0 8px var(--teal);
   animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: .35;
   }
}

.clock {
   font-size: 12px;
   color: var(--text-dim);
}

main.layout {
   flex: 1;
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 22px;
   padding: 22px clamp(16px, 4vw, 40px) 40px;
   max-width: 1240px;
   width: 100%;
   margin: 0 auto;
}

@media (max-width:900px) {
   main.layout {
      grid-template-columns: 1fr;
   }
}

/* ---------- WINDOW / PANEL CHROME ---------- */
.rpg-panel {
   position: relative;
   background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
   border: 1px solid var(--border);
   border-radius: var(--radius);
}

.rpg-panel::before {
   content: "";
   position: absolute;
   inset: 5px;
   border: 1px solid rgba(227, 189, 87, .14);
   pointer-events: none;
}

.corner {
   position: absolute;
   width: 9px;
   height: 9px;
   border: 2px solid var(--gold-dim);
}

.corner.tl {
   top: -1px;
   left: -1px;
   border-right: none;
   border-bottom: none;
}

.corner.tr {
   top: -1px;
   right: -1px;
   border-left: none;
   border-bottom: none;
}

.corner.bl {
   bottom: -1px;
   left: -1px;
   border-right: none;
   border-top: none;
}

.corner.br {
   bottom: -1px;
   right: -1px;
   border-left: none;
   border-top: none;
}

/* ---------- SIDEBAR ---------- */
aside.sidebar {
   padding: 22px 18px;
   height: fit-content;
}

.portrait-wrap {
   position: relative;
   width: 158px;
   height: 158px;
   margin: 6px auto 16px;
}

.ring {
   position: absolute;
   inset: 0;
}

.ring circle {
   fill: none;
   stroke-width: 3;
}

.ring .track {
   stroke: var(--border-soft);
}

.ring .fill {
   stroke: var(--gold);
   stroke-linecap: round;
   stroke-dasharray: 437;
   stroke-dashoffset: 437;
   transform: rotate(-90deg);
   transform-origin: 50% 50%;
   transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1);
   filter: drop-shadow(0 0 4px rgba(227, 189, 87, .5));
}

.portrait-frame {
   position: absolute;
   inset: 16px;
   border-radius: 50%;
   background: radial-gradient(circle at 50% 30%, #232a4a, #12152a 75%);
   border: 1px solid var(--border);
   overflow: hidden;
}

.avatar {
   position: absolute;
   inset: 0;
}

.avatar .glow {
   position: absolute;
   left: 50%;
   top: 38%;
   width: 70px;
   height: 70px;
   margin: -35px 0 0 -35px;
   background: radial-gradient(circle, rgba(90, 167, 255, .35), transparent 70%);
   animation: glowpulse 3s ease-in-out infinite;
}

@keyframes glowpulse {

   0%,
   100% {
      transform: scale(1);
      opacity: .7;
   }

   50% {
      transform: scale(1.15);
      opacity: 1;
   }
}

.avatar .hood {
   position: absolute;
   left: 50%;
   top: 58%;
   width: 92px;
   height: 96px;
   margin-left: -46px;
   background: linear-gradient(180deg, #2b3358, #1a2038);
   clip-path: polygon(50% 0%, 100% 30%, 88% 100%, 12% 100%, 0% 30%);
}

.avatar .head {
   position: absolute;
   left: 50%;
   top: 32%;
   width: 56px;
   height: 56px;
   margin: -28px 0 0 -28px;
   background: radial-gradient(circle at 35% 30%, #33395c, #191d34);
   border-radius: 50% 50% 46% 46%;
}

.avatar .eye {
   position: absolute;
   top: 52%;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--teal);
   box-shadow: 0 0 6px var(--teal);
   animation: eyeblink 4s ease-in-out infinite;
}

.avatar .eye.l {
   left: 41%;
}

.avatar .eye.r {
   left: 56%;
}

@keyframes eyeblink {

   0%,
   92%,
   100% {
      transform: scaleY(1);
   }

   95% {
      transform: scaleY(.1);
   }
}

.avatar .staff {
   position: absolute;
   left: 74%;
   top: 40%;
   width: 3px;
   height: 78px;
   background: linear-gradient(180deg, #8a5a2f, #5c3b1c);
   transform: rotate(18deg);
   border-radius: 2px;
}

.avatar .orb {
   position: absolute;
   left: 74%;
   top: 34%;
   width: 12px;
   height: 12px;
   margin-left: -4px;
   border-radius: 50%;
   background: radial-gradient(circle, #bfe6ff, var(--blue));
   box-shadow: 0 0 10px var(--blue), 0 0 20px rgba(90, 167, 255, .5);
   transform: rotate(18deg);
   animation: orbpulse 2.4s ease-in-out infinite;
}

@keyframes orbpulse {

   0%,
   100% {
      opacity: .75;
   }

   50% {
      opacity: 1;
   }
}

.lvl-badge {
   position: absolute;
   bottom: -6px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--bg-deep);
   border: 1px solid var(--gold);
   color: var(--gold);
   font-family: var(--font-display);
   font-size: 10px;
   padding: 4px 8px;
   letter-spacing: 1px;
   white-space: nowrap;
}

.char-name {
   text-align: center;
   font-family: var(--font-display);
   font-size: 13px;
   color: var(--text);
   margin-top: 14px;
   letter-spacing: .5px;
}

.char-class {
   text-align: center;
   font-size: 12px;
   color: var(--teal);
   margin-top: 8px;
}

.stat-bars {
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.stat-bar-row {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.stat-bar-label {
   display: flex;
   justify-content: space-between;
   font-size: 10px;
   color: var(--text-dim);
}

.stat-bar-label b {
   color: var(--text);
   font-weight: 600;
}

.bar-track {
   height: 9px;
   background: #0d1022;
   border: 1px solid var(--border-soft);
   position: relative;
   overflow: hidden;
}

.bar-fill {
   position: absolute;
   inset: 0;
   width: 0%;
   transition: width 1.2s cubic-bezier(.2, .8, .2, 1);
}

.bar-fill.hp {
   background: linear-gradient(90deg, #ff5d68, #c92b3a);
}

.bar-fill.mp {
   background: linear-gradient(90deg, #5aa7ff, #3162c9);
}

.bar-fill.xp {
   background: linear-gradient(90deg, #e3bd57, #a67f1f);
}

.quick-attrs {
   margin-top: 20px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px 14px;
   font-size: 10.5px;
   color: var(--text-dim);
}

.quick-attrs div span {
   color: var(--gold);
   font-weight: 600;
}

/* ---------- MAIN WINDOW ---------- */
section.window {
   display: flex;
   flex-direction: column;
   min-height: 560px;
}

nav.tabs {
   display: flex;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--border);
   background: rgba(0, 0, 0, .15);
}

.tab-btn {
   background: transparent;
   border: none;
   cursor: pointer;
   padding: 14px 18px;
   font-size: 11px;
   font-family: var(--font-body);
   font-weight: 600;
   color: var(--text-dim);
   letter-spacing: .4px;
   display: flex;
   align-items: center;
   gap: 8px;
   border-right: 1px solid var(--border-soft);
   position: relative;
   transition: color .2s ease, background .2s ease;
}

.tab-btn .cursor {
   opacity: 0;
   color: var(--gold);
   transition: opacity .15s ease;
}

.tab-btn:hover {
   color: var(--text);
   background: rgba(255, 255, 255, .02);
}

.tab-btn[aria-selected="true"] {
   color: var(--gold);
   background: rgba(227, 189, 87, .06);
}

.tab-btn[aria-selected="true"] .cursor {
   opacity: 1;
}

.tab-btn[aria-selected="true"]::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: 2px;
   background: var(--gold);
}

.tab-panel {
   display: none;
   padding: 26px clamp(16px, 3vw, 32px);
   flex: 1;
}

.tab-panel.active {
   display: block;
   animation: fadein .35s ease;
}

@keyframes fadein {
   from {
      opacity: 0;
      transform: translateY(4px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.section-title {
   font-family: var(--font-display);
   font-size: 12px;
   color: var(--gold);
   letter-spacing: 1px;
   margin-bottom: 18px;
   display: flex;
   align-items: center;
   gap: 10px;
}

.section-title::after {
   content: "";
   flex: 1;
   height: 1px;
   background: var(--border-soft);
}

/* STATUS TAB */
.dialogue-box {
   background: #0d1022;
   border: 1px solid var(--border-soft);
   border-left: 3px solid var(--teal);
   padding: 16px 18px;
   font-size: 13px;
   line-height: 1.85;
   color: var(--text);
   min-height: 120px;
}

.dialogue-box .cursor-blink {
   display: inline-block;
   width: 7px;
   height: 13px;
   background: var(--teal);
   margin-left: 2px;
   animation: blink .9s steps(1) infinite;
   vertical-align: -1px;
}

.attr-grid {
   margin-top: 24px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px 28px;
}

@media (max-width:640px) {
   .attr-grid {
      grid-template-columns: 1fr;
   }
}

.attr-item {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.attr-top {
   display: flex;
   justify-content: space-between;
   font-size: 11.5px;
}

.attr-top .name {
   color: var(--text);
}

.attr-top .val {
   color: var(--gold);
   font-weight: 600;
}

.attr-track {
   height: 6px;
   background: #0d1022;
   border: 1px solid var(--border-soft);
}

.attr-fill {
   height: 100%;
   width: 0%;
   background: linear-gradient(90deg, var(--teal), var(--blue));
   transition: width 1s ease;
}

/* SKILLS TAB */
.skill-group {
   margin-bottom: 26px;
}

.skill-group h3 {
   font-size: 11px;
   color: var(--purple);
   letter-spacing: .6px;
   margin-bottom: 12px;
   text-transform: uppercase;
}

.skill-list {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px 24px;
}

@media (max-width:640px) {
   .skill-list {
      grid-template-columns: 1fr;
   }
}

.skill-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 9px 0;
   border-bottom: 1px dashed var(--border-soft);
   font-size: 12.5px;
}

.pips {
   display: flex;
   gap: 3px;
}

.pip {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--border-soft);
}

.pip.on {
   background: var(--gold);
   box-shadow: 0 0 5px rgba(227, 189, 87, .6);
}

/* QUESTS TAB */
.quest-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

@media (max-width:760px) {
   .quest-grid {
      grid-template-columns: 1fr;
   }
}

.quest-card {
   background: #0d1022;
   border: 1px solid var(--border-soft);
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: relative;
}

.quest-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 10px;
}

.quest-title {
   font-size: 13px;
   font-weight: 700;
   color: var(--text);
   line-height: 1.4;
}

.rank {
   font-family: var(--font-display);
   font-size: 10px;
   padding: 4px 7px;
   border: 1px solid;
   white-space: nowrap;
}

.rank.S {
   color: #ff8a5b;
   border-color: #ff8a5b;
}

.rank.A {
   color: var(--gold);
   border-color: var(--gold);
}

.rank.B {
   color: var(--teal);
   border-color: var(--teal);
}

.rank.C {
   color: var(--blue);
   border-color: var(--blue);
}

.quest-desc {
   font-size: 12px;
   color: var(--text-dim);
   line-height: 1.6;
}

.quest-status {
   font-size: 10px;
   letter-spacing: .5px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   width: fit-content;
   padding: 3px 8px;
   border-radius: 2px;
}

.quest-status.done {
   color: #8affb0;
   background: rgba(53, 224, 124, .09);
   border: 1px solid rgba(53, 224, 124, .3);
}

.quest-status.progress {
   color: #ffd76a;
   background: rgba(255, 215, 106, .08);
   border: 1px solid rgba(255, 215, 106, .3);
}

.quest-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.tag {
   font-size: 9.5px;
   color: var(--text-dim);
   border: 1px solid var(--border-soft);
   padding: 2px 7px;
}

.quest-actions {
   display: flex;
   gap: 10px;
   margin-top: 2px;
}

.quest-actions a {
   font-size: 10.5px;
   color: var(--teal);
   text-decoration: none;
   border-bottom: 1px solid transparent;
}

.quest-actions a:hover {
   border-bottom-color: var(--teal);
}

/* INVENTORY TAB */
.inv-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
   gap: 12px;
}

.inv-slot {
   background: #0d1022;
   border: 1px solid var(--border-soft);
   aspect-ratio: 1;
   border-radius: 2px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 6px;
   position: relative;
   cursor: default;
   transition: border-color .2s ease, transform .2s ease;
}

.inv-slot:hover {
   border-color: var(--gold);
   transform: translateY(-2px);
}

.inv-slot .icon {
   font-size: 22px;
}

.inv-slot .label {
   font-size: 9px;
   color: var(--text-dim);
   text-align: center;
}

.inv-slot .tip {
   position: absolute;
   bottom: calc(100% + 8px);
   left: 50%;
   transform: translateX(-50%) translateY(4px);
   background: #05060b;
   border: 1px solid var(--gold-dim);
   color: var(--text);
   font-size: 13.5px;
   padding: 7px 9px;
   width: 150px;
   text-align: center;
   line-height: 1.5;
   opacity: 0;
   pointer-events: none;
   transition: opacity .18s ease, transform .18s ease;
   z-index: 5;
}

.inv-slot:hover .tip {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
}

/* CONTACT TAB */
.raven-intro {
   font-size: 12.5px;
   color: var(--text-dim);
   line-height: 1.8;
   margin-bottom: 20px;
   max-width: 56ch;
}

.choice-list {
   display: flex;
   flex-direction: column;
   gap: 2px;
   max-width: 420px;
}

.choice {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 13px 14px;
   background: #0d1022;
   border: 1px solid var(--border-soft);
   text-decoration: none;
   color: var(--text);
   font-size: 12.5px;
   transition: border-color .18s ease, padding-left .18s ease, background .18s ease;
}

.choice .arrow {
   color: var(--gold);
   opacity: 0;
   transition: opacity .18s ease;
}

.choice:hover {
   border-color: var(--gold);
   padding-left: 20px;
   background: rgba(227, 189, 87, .05);
}

.choice:hover .arrow {
   opacity: 1;
}

.choice span.k {
   color: var(--text-dim);
   margin-left: auto;
   font-size: 10.5px;
}

/* FOOTER DIALOGUE BAR */
footer.hud {
   border-top: 1px solid var(--border-soft);
   padding: 10px clamp(16px, 4vw, 40px);
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 10px;
   color: var(--text-dim);
   flex-wrap: wrap;
   gap: 6px;
}

footer.hud b {
   color: var(--gold);
}

/* TOAST */
#toast {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%) translateY(-20px);
   background: #0d1022;
   border: 1px solid var(--gold);
   padding: 14px 20px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 11px;
   z-index: 200;
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s ease, transform .3s ease;
   box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

#toast.show {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
}

#toast .t-title {
   font-family: var(--font-display);
   font-size: 9.5px;
   color: var(--gold);
   display: block;
   margin-bottom: 4px;
}

@media (prefers-reduced-motion: reduce) {
   * {
      animation-duration: 2.4s !important;
      transition-duration: .5s !important;
   }
}