:root {
  --safe-top: max(12px, env(safe-area-inset-top));
  --safe-right: max(14px, env(safe-area-inset-right));
  --safe-bottom: max(14px, env(safe-area-inset-bottom));
  --safe-left: max(14px, env(safe-area-inset-left));
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #06131f;
  touch-action: none;
  user-select: none;
}

button { font: inherit; }

#game {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  background: linear-gradient(#63bdf0, #bee8f4 62%, #357d49);
  isolation: isolate;
}

.parallax-track,
.world-track,
.cloud-field,
.grass-track,
#characterCanvas,
.skill2-vfx,
.sun-light,
.screen-vignette {
  position: absolute;
  inset: 0 auto 0 0;
  pointer-events: none;
}

.parallax-track,
.world-track {
  height: 100%;
  will-change: transform;
}

.sky-track { z-index: 1; }
.mountain-track { z-index: 3; }
.tree-layer-far { z-index: 4; }
.tree-layer-mid { z-index: 5; }
.tree-layer-back { z-index: 6; }
.house-track { z-index: 7; }

/* NEXORIA 1.0.3: các lớp này đã được đưa vào chung WebGL scene với nhân vật. */
.mountain-track,
.tree-layer,
.house-track,
.grass-track {
  display: none !important;
}

.sky-picture {
  width: 100%;
  height: 100%;
  background-position: center bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.sky-picture { background-image: url("assets/world-3d/01-sky.png"); }

.mountain-track {
  overflow: hidden;
}

.mountain-range {
  position: absolute;
  bottom: 7.5%;
  width: 31%;
  height: auto;
  opacity: .82;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(.74) brightness(1.04) contrast(.9);
}

.mountain-01 { left: -1%; }
.mountain-02 { left: 17%; bottom: 6.8%; opacity: .7; }
.mountain-03 { left: 35%; }
.mountain-04 { left: 53%; bottom: 6.8%; opacity: .7; }
.mountain-05 { left: 71%; }

.cloud-field {
  z-index: 2;
  width: 100%;
  height: 58%;
  overflow: hidden;
}

.cloud-sprite {
  position: absolute;
  left: 0;
  height: auto;
  opacity: .72;
  pointer-events: none;
  will-change: transform;
}

.cloud-a { top: -8%; width: clamp(560px, 72vw, 1060px); }
.cloud-b { top: 7%; width: clamp(430px, 59vw, 860px); opacity: .58; }
.cloud-c { top: 18%; width: clamp(350px, 48vw, 720px); opacity: .46; }

.world-track { overflow: visible; }

.layer-tree,
.world-house {
  position: absolute;
  pointer-events: none;
}

.layer-tree {
  height: auto;
  transform-origin: 50% 100%;
  animation: tree-sway var(--sway-time, 4s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}

.tree-layer-far .layer-tree { filter: saturate(.6) brightness(1.06) contrast(.86); }
.tree-layer-mid .layer-tree { filter: saturate(.74) brightness(.99) contrast(.92); }
.tree-layer-back .layer-tree { filter: saturate(.88) brightness(.94); }

.world-house {
  bottom: 3.5%;
  width: 92.5vh;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 10px rgba(7,31,25,.2));
}

.house-01 { left: 1.5%; bottom: 3.5%; }
.house-02 { left: 13.7%; bottom: 2.54%; }
.house-03 { left: 27.1%; width: 70vh; bottom: 2%; }
.house-04 { left: 37%; bottom: .61%; }
.house-05 { left: 49.3%; bottom: 1.81%; }
.house-06 { left: 61.7%; bottom: 3.5%; }
.house-07 { left: 74.1%; bottom: 1.57%; }
.house-08 { left: 86.2%; bottom: 3.5%; }

.sun-light {
  z-index: 8;
  width: 100%;
  background:
    linear-gradient(112deg, rgba(255,255,255,.34) 0%, rgba(255,245,181,.12) 23%, transparent 44%),
    radial-gradient(circle at 16% 3%, rgba(255,251,205,.5), transparent 28%);
  mix-blend-mode: screen;
}

#characterCanvas {
  z-index: 7;
  width: 100%;
  height: 100%;
}

.skill2-vfx {
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: layout paint style;
}

.skill2-vfx-ground { z-index: 9; }
.skill2-vfx-air { z-index: 10; }

.skill2-ring-plane,
.skill2-ice-slot,
.skill2-spark {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.skill2-ring-plane {
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 9px rgba(43,196,255,.78));
}

.skill2-ring {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.skill2-ice-slot {
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.skill2-ice {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 0;
  height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 8px rgba(62,204,255,.82));
  will-change: transform, opacity;
}

.skill2-spark {
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(85,208,255,.94));
}

.grass-track {
  top: auto;
  bottom: -2px;
  z-index: 10;
  height: 13%;
  background-image: url("assets/grass-low.png"), url("assets/grass-low.png");
  background-repeat: repeat-x, repeat-x;
  background-position: left bottom, -54px calc(100% + 2px);
  background-size: auto calc(100% + 2px), auto 92%;
  filter: saturate(.92) brightness(.78);
  opacity: .96;
  animation: grass-breathe 2.8s ease-in-out infinite alternate;
  will-change: transform;
}

.screen-vignette {
  z-index: 12;
  width: 100%;
  background:
    linear-gradient(90deg, rgba(1,10,16,.25), transparent 16%, transparent 84%, rgba(1,10,16,.25)),
    linear-gradient(0deg, rgba(1,9,14,.38), transparent 19%, transparent 82%, rgba(1,9,14,.1));
}

.topbar {
  position: absolute;
  z-index: 20;
  top: var(--safe-top);
  right: var(--safe-right);
  left: var(--safe-left);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}

.brand,
.head-picker,
.camera-zoom-button,
.auto-button,
.direction-note {
  border: 1px solid rgba(157,226,255,.36);
  background: linear-gradient(180deg, rgba(4,28,45,.82), rgba(3,18,31,.72));
  box-shadow: 0 10px 26px rgba(0,10,20,.26), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.camera-zoom-button {
  align-self: flex-start;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 13px;
  color: #e7f9ff;
  font-size: clamp(10px, 1.25vw, 13px);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}

.camera-zoom-button:active {
  border-color: rgba(116,226,255,.85);
  background: linear-gradient(180deg, rgba(31,126,168,.92), rgba(10,66,96,.92));
  transform: translateY(1px);
}

.brand {
  display: grid;
  gap: 2px;
  min-width: min(300px, 48vw);
  padding: 9px 14px 10px;
  border-radius: 14px;
}

.brand strong {
  color: #bfeeff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(16px, 2.2vw, 24px);
  letter-spacing: .16em;
  text-shadow: 0 0 14px rgba(80,197,255,.55);
}

.brand span {
  color: rgba(232,248,255,.83);
  font-size: clamp(9px, 1.25vw, 13px);
}

.head-picker {
  display: flex;
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  pointer-events: auto;
}

.head-button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #d8f3ff;
  background: rgba(19,63,87,.46);
  cursor: pointer;
}

.head-button.is-active {
  border-color: rgba(116,226,255,.8);
  color: white;
  background: linear-gradient(180deg, #2187b4, #125677);
  box-shadow: 0 0 16px rgba(63,195,255,.35);
}

.controls {
  position: absolute;
  z-index: 22;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

.joystick {
  position: relative;
  width: clamp(108px, 18vh, 148px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  margin-bottom: 19px;
}

.joystick-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(177,237,255,.5);
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(45,152,192,.2) 0 12%, transparent 13%),
    repeating-radial-gradient(circle, transparent 0 24%, rgba(193,242,255,.12) 25% 26%, transparent 27% 48%),
    rgba(5,36,56,.58);
  box-shadow: inset 0 0 24px rgba(89,208,255,.24), 0 8px 28px rgba(0,15,25,.38);
}

.joystick-ring::before,
.joystick-ring::after {
  content: "";
  position: absolute;
  background: rgba(196,240,255,.17);
}

.joystick-ring::before {
  top: 50%;
  right: 13%;
  left: 13%;
  height: 1px;
}

.joystick-ring::after {
  top: 13%;
  bottom: 13%;
  left: 50%;
  width: 1px;
}

.joystick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  aspect-ratio: 1;
  border: 2px solid rgba(211,249,255,.75);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #7edfff, #1688bb 57%, #0a4a70);
  box-shadow: 0 4px 17px rgba(0,13,25,.45), inset 0 2px 8px rgba(255,255,255,.36), 0 0 20px rgba(67,204,255,.32);
  transform: translate(-50%, -50%);
  will-change: transform;
}

.axis-lock {
  position: absolute;
  right: 0;
  bottom: -18px;
  left: 0;
  color: rgba(224,247,255,.75);
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 3px #00111e;
}

.auto-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 999px;
  color: #e3f8ff;
  cursor: pointer;
  pointer-events: auto;
}

.auto-button.is-active {
  border-color: rgba(111,238,207,.8);
  background: linear-gradient(180deg, rgba(13,114,104,.9), rgba(5,67,70,.9));
}

.auto-icon { color: #71f0c7; }

.direction-note {
  position: absolute;
  z-index: 21;
  right: var(--safe-right);
  bottom: calc(var(--safe-bottom) + 63px);
  max-width: min(390px, 54vw);
  padding: 6px 10px;
  border-radius: 10px;
  color: rgba(225,244,250,.72);
  font-size: clamp(9px, 1.1vw, 12px);
  text-align: right;
}

.rotate-hint { display: none; }

@keyframes grass-breathe {
  from { background-position: left bottom; }
  to { background-position: 2px bottom; }
}

@keyframes tree-sway {
  from { transform: rotate(-.35deg); }
  to { transform: rotate(.5deg); }
}

@media (orientation: portrait) {
  .rotate-hint {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
    display: block;
    width: min(300px, 82vw);
    padding: 14px 18px;
    border: 1px solid rgba(147,225,255,.5);
    border-radius: 16px;
    color: white;
    background: rgba(2,20,34,.88);
    font-size: 14px;
    text-align: center;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(10px);
  }
}

@media (max-height: 440px) {
  .brand { padding: 6px 10px; }
  .head-button { min-height: 30px; padding: 0 9px; font-size: 11px; }
  .camera-zoom-button { min-height: 34px; padding: 0 10px; font-size: 10px; }
  .auto-button { min-height: 40px; padding: 0 13px; font-size: 12px; }
  .direction-note { bottom: calc(var(--safe-bottom) + 49px); }
}

[hidden] { display: none !important; }

.auth-gate {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    linear-gradient(90deg, rgba(2,9,22,.96), rgba(5,27,50,.76) 55%, rgba(2,10,22,.94)),
    url("assets/world-3d/01-sky.png") center / cover no-repeat;
  touch-action: pan-y;
}

.auth-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 20%, rgba(58,168,255,.26), transparent 34%),
    radial-gradient(circle at 26% 85%, rgba(22,233,209,.12), transparent 32%);
}

.auth-card {
  position: relative;
  width: min(430px, 94vw);
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(145,222,255,.42);
  border-radius: 24px;
  color: #edfaff;
  background: linear-gradient(155deg, rgba(8,35,59,.95), rgba(3,16,31,.96));
  box-shadow: 0 30px 90px rgba(0,5,18,.62), inset 0 1px rgba(255,255,255,.1), 0 0 45px rgba(31,163,230,.12);
  backdrop-filter: blur(14px);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.auth-brand img {
  width: clamp(72px, 11vw, 94px);
  aspect-ratio: 1;
  border: 1px solid rgba(173,230,255,.5);
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0,0,0,.36), 0 0 22px rgba(52,183,255,.22);
}

.auth-brand p,
.auth-brand h1 { margin: 0; }
.auth-brand p { color: #73d8ff; font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.auth-brand h1 { margin-top: 2px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px, 6vw, 42px); line-height: 1; letter-spacing: .08em; text-shadow: 0 0 20px rgba(73,195,255,.45); }
.auth-brand span { display: block; margin-top: 6px; color: rgba(224,245,255,.66); font-size: 12px; }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 16px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(1,12,24,.55);
}

.auth-tab {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(222,245,255,.72);
  background: transparent;
  cursor: pointer;
}

.auth-tab.is-active {
  border-color: rgba(111,218,255,.58);
  color: white;
  background: linear-gradient(180deg, #187dac, #0b4e73);
  box-shadow: 0 7px 18px rgba(1,15,28,.35), inset 0 1px rgba(255,255,255,.12);
}

.auth-form { display: grid; gap: 12px; }
.auth-form label { display: grid; gap: 6px; }
.auth-form label > span { color: rgba(225,245,255,.82); font-size: 12px; font-weight: 700; }
.auth-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(142,211,240,.3);
  border-radius: 12px;
  outline: none;
  color: #f4fbff;
  background: rgba(2,14,28,.7);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.2);
  touch-action: manipulation;
  user-select: text;
}

.auth-form input:focus { border-color: #56cfff; box-shadow: 0 0 0 3px rgba(61,194,250,.14); }
.auth-submit {
  min-height: 50px;
  margin-top: 2px;
  border: 1px solid rgba(143,231,255,.7);
  border-radius: 13px;
  color: white;
  background: linear-gradient(180deg, #1c9bc9, #0b5a84);
  box-shadow: 0 12px 25px rgba(0,80,129,.28), inset 0 1px rgba(255,255,255,.2);
  cursor: pointer;
}
.auth-submit:disabled { opacity: .58; cursor: wait; }
.auth-message { min-height: 20px; margin: 0; color: #caeaff; font-size: 12px; line-height: 1.45; text-align: center; }
.auth-message[data-kind="error"] { color: #ffb7b7; }
.auth-message[data-kind="success"] { color: #78f0c8; }
.quick-note { margin: 10px 0 0; color: rgba(207,231,241,.58); font-size: 10.5px; line-height: 1.5; text-align: center; }

.brand strong small {
  margin-left: 5px;
  color: rgba(196,235,249,.62);
  font-family: inherit;
  font-size: .52em;
  letter-spacing: .06em;
}

.account-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 5px 6px;
  border: 1px solid rgba(157,226,255,.36);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(4,28,45,.86), rgba(3,18,31,.76));
  box-shadow: 0 10px 26px rgba(0,10,20,.26), inset 0 1px rgba(255,255,255,.08);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}

.account-chip img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.account-chip > span { display: grid; min-width: 76px; }
.account-chip b { overflow: hidden; color: #effbff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-chip small { color: #74d9ff; font-size: 10px; }
.account-chip button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(166,220,241,.28);
  border-radius: 9px;
  color: rgba(230,248,255,.82);
  background: rgba(19,67,91,.54);
  cursor: pointer;
}

.combat-controls {
  order: 3;
  display: grid;
  justify-items: end;
  gap: 6px;
  pointer-events: none;
}

.skill-row { display: flex; gap: 6px; }
.skill-button,
.attack-button { pointer-events: auto; cursor: pointer; }
.skill-button {
  width: clamp(34px, 6.5vh, 48px);
  aspect-ratio: 1;
  border: 2px solid rgba(207,240,255,.72);
  border-radius: 50%;
  color: #e9faff;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,0,0,.55);
  background: radial-gradient(circle at 35% 25%, #fff3a8 0 8%, #bd7b24 34%, #5c2d14 72%, #21130e);
  box-shadow: 0 6px 18px rgba(0,11,24,.46), inset 0 2px 7px rgba(255,255,255,.3), 0 0 13px rgba(255,183,71,.24);
}
.skill-button:nth-child(2) {
  background: radial-gradient(circle at 35% 25%, #e8fbff 0 8%, #35bde6 34%, #135283 72%, #071d38);
  box-shadow: 0 6px 18px rgba(0,11,24,.46), inset 0 2px 7px rgba(255,255,255,.3), 0 0 14px rgba(82,214,255,.3);
}
.skill-button:nth-child(3) {
  background: radial-gradient(circle at 35% 25%, #f8e7ff 0 8%, #9c5be1 34%, #49227d 72%, #1d1038);
  box-shadow: 0 6px 18px rgba(0,11,24,.46), inset 0 2px 7px rgba(255,255,255,.3), 0 0 14px rgba(186,104,255,.28);
}
.attack-button {
  display: grid;
  place-items: center;
  width: clamp(78px, 14vh, 112px);
  aspect-ratio: 1;
  border: 3px solid rgba(218,246,255,.82);
  border-radius: 50%;
  color: white;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.62), transparent 17%),
    radial-gradient(circle, #4fcdf0 0 28%, #176b9b 57%, #092b4a 77%, #041729 100%);
  box-shadow: 0 10px 30px rgba(0,15,29,.52), inset 0 3px 11px rgba(255,255,255,.28), inset 0 -5px 12px rgba(0,13,34,.34), 0 0 22px rgba(71,199,255,.3);
}
.attack-button span { font-size: clamp(22px, 4vh, 34px); line-height: 1; }
.attack-button b { font-size: clamp(9px, 1.6vh, 12px); letter-spacing: .04em; }
.skill-button:disabled,
.attack-button:disabled { opacity: .5; cursor: wait; }
.auto-button { order: 2; align-self: flex-end; margin: 0 8px 2px auto; }

@media (max-height: 520px) {
  .account-chip { min-height: 40px; }
  .account-chip img { width: 31px; height: 31px; }
  .account-chip button { min-height: 28px; padding: 0 8px; font-size: 10px; }
  .skill-row { gap: 4px; }
  .direction-note { display: none; }
}

@media (orientation: portrait) {
  .auth-card { margin: auto; }
  .account-chip { max-width: 48vw; }
  .account-chip > span { min-width: 0; }
}