.facebook-button {
  border: 0;
  background: #1877f2;
  color: #fff;
  padding: 13px;
  font-weight: 700;
  cursor: pointer;
}

.facebook-button span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: #fff;
  color: #1877f2;
  font: 700 17px Arial, sans-serif;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #66717e;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
[hidden]{display:none!important}

.appearance-shell{min-height:100vh;padding:42px clamp(20px,6vw,90px) 100px;background:radial-gradient(circle at 50% 0,#26362b,#0b0f13 48%,#080a0d)}.appearance-head{display:flex;justify-content:space-between;align-items:center;gap:30px;max-width:1180px;margin:0 auto 32px}.appearance-head h1{margin:5px 0 10px;font:600 clamp(34px,5vw,62px) Cinzel;color:#f0dfba}.appearance-head p{max-width:720px;color:#a9b1ad;line-height:1.6}.cosmetic-seal{display:grid;place-items:center;width:105px;height:105px;flex:0 0 auto;border:1px solid #b99354;border-radius:50%;color:#d8ba7d;text-align:center;font:700 11px/1.5 Cinzel;transform:rotate(7deg);box-shadow:inset 0 0 0 5px #0f1415,0 0 35px #d5a95a19}.appearance-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px;max-width:1180px;margin:auto}.appearance-card{display:flex;flex-direction:column;align-items:center;min-height:310px;padding:18px 14px;border:1px solid #39433f;background:linear-gradient(160deg,#17201e,#101418);color:#e9e4d7;cursor:pointer;transition:.18s}.appearance-card:hover,.appearance-card.selected{border-color:#d0a75f;background:linear-gradient(160deg,#24332c,#171813);transform:translateY(-3px);box-shadow:0 14px 32px #0008}.appearance-card b{margin:14px 0 6px;font:600 15px Cinzel;color:#efd59f}.appearance-card small{min-height:42px;color:#9da7a3;font-size:10px;line-height:1.5;text-transform:none;letter-spacing:0}.appearance-card em{margin-top:auto;color:#66b58c;font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-style:normal}.look-avatar{position:relative;display:block;width:105px;height:150px;filter:drop-shadow(0 12px 8px #0008);image-rendering:pixelated}.look-avatar i{position:absolute;display:block}.look-head{left:34px;top:29px;width:38px;height:42px;background:var(--skin);clip-path:polygon(12% 0,88% 0,100% 28%,88% 100%,12% 100%,0 28%)}.look-hair{z-index:2;left:30px;top:21px;width:46px;height:25px;background:var(--hair);clip-path:polygon(12% 0,88% 0,100% 45%,80% 65%,70% 42%,15% 72%,0 45%)}.look-body{left:17px;top:67px;width:72px;height:58px;background:linear-gradient(90deg,var(--secondary) 0 17%,var(--primary) 17% 83%,var(--secondary) 83%);clip-path:polygon(16% 0,84% 0,100% 25%,91% 100%,9% 100%,0 25%)}.look-belt{z-index:2;left:20px;top:111px;width:66px;height:10px;background:#2b211a;border-left:14px solid var(--secondary);border-right:14px solid var(--secondary)}.look-legs{left:25px;top:121px;width:56px;height:29px;background:linear-gradient(90deg,#292b2d 0 43%,transparent 43% 57%,#292b2d 57%)}.appearance-confirm{position:fixed;z-index:5;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;gap:30px;width:min(740px,calc(100% - 30px));padding:12px 14px 12px 20px;border:1px solid #66553a;background:#0c1113ed;box-shadow:0 16px 45px #000}.appearance-confirm span{color:#b8bfba;font-size:12px}.appearance-confirm button{min-width:210px}
@media(max-width:950px){.appearance-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:570px){.appearance-shell{padding:25px 15px 110px}.appearance-head{align-items:flex-start}.cosmetic-seal{width:75px;height:75px;font-size:8px}.appearance-grid{grid-template-columns:1fr 1fr;gap:8px}.appearance-card{min-height:280px;padding:12px 8px}.appearance-confirm{align-items:stretch;flex-direction:column;gap:8px}.appearance-confirm button{width:100%}}

.tutorial-shell{position:relative;min-height:100vh;overflow:hidden;cursor:pointer;background:#172a20;color:#f3e4c3;user-select:none;isolation:isolate}.tutorial-scene{position:absolute;inset:0;background:linear-gradient(#789caf 0 52%,#617f3d 52% 76%,#31542f 76%);image-rendering:pixelated}.tutorial-scene:after{content:"";position:absolute;inset:72% 0 0;background:linear-gradient(166deg,transparent 0 27%,#a68651 28% 54%,transparent 55%),repeating-linear-gradient(90deg,#264527 0 8%,#2c4d2b 8% 16%)}.tutorial-sun{position:absolute;right:13%;top:10%;width:68px;height:68px;border-radius:50%;background:#e9c875;box-shadow:0 0 45px #f6dc8f88}.tutorial-mountain{position:absolute;bottom:43%;width:38%;height:33%;background:#40594a;clip-path:polygon(50% 0,100% 100%,0 100%)}.mountain-a{left:-7%}.mountain-b{right:-5%;height:28%;background:#4d6652}.tutorial-tree{position:absolute;bottom:20%;width:82px;height:250px;background:linear-gradient(90deg,#573b23,#795330 55%,#422d1e 56%);clip-path:polygon(39% 100%,46% 45%,0 49%,27% 31%,10% 24%,37% 19%,31% 0,55% 15%,75% 6%,69% 29%,100% 36%,69% 46%,61% 100%)}.tree-a{left:7%;transform:scale(1.25)}.tree-b{right:6%;bottom:31%;transform:scale(.75)}.tutorial-rock{position:absolute;left:28%;bottom:25%;width:125px;height:75px;background:#657068;clip-path:polygon(15% 20%,68% 0,100% 44%,82% 100%,5% 85%,0 48%)}.tutorial-water{position:absolute;right:15%;bottom:9%;width:31%;height:18%;border-radius:50%;background:#3f7c87;transform:skewX(-18deg);box-shadow:inset 0 10px #72a6a3}.tutorial-player,.tutorial-npc{position:absolute;bottom:21%;width:45px;height:105px;filter:drop-shadow(0 8px 3px #0007)}.tutorial-player{left:46%;background:linear-gradient(#3a251a 0 18%,#d5a276 18% 42%,#486d53 42% 76%,#2a3130 76%);clip-path:polygon(25% 0,75% 0,88% 20%,76% 39%,100% 50%,82% 75%,68% 75%,68% 100%,53% 100%,50% 76%,47% 100%,30% 100%,30% 75%,15% 75%,0 50%,24% 39%,12% 20%)}.tutorial-npc{left:57%;background:linear-gradient(#c2c6c2 0 22%,#bd9168 22% 42%,#89493c 42% 76%,#343b3b 76%);clip-path:polygon(25% 0,75% 0,88% 20%,76% 39%,100% 50%,82% 75%,68% 75%,68% 100%,53% 100%,50% 76%,47% 100%,30% 100%,30% 75%,15% 75%,0 50%,24% 39%,12% 20%)}.tutorial-npc.npc-borin{background:linear-gradient(#412d20 0 22%,#b7825d 22% 42%,#59616a 42% 76%,#2b3034 76%)}.tutorial-npc.npc-mira{background:linear-gradient(#d1ae67 0 22%,#c99572 22% 42%,#3e7081 42% 76%,#253c43 76%)}
.tutorial-skip{position:absolute;z-index:10;right:24px;top:22px;padding:10px 16px;border:1px solid #e1cc9b77;background:#101817bf;color:#f0dfb5;cursor:pointer;text-transform:uppercase;letter-spacing:.12em;font-size:10px}.tutorial-progress{position:absolute;z-index:10;left:24px;top:25px;display:flex;gap:7px}.tutorial-progress i{width:29px;height:4px;background:#19221f99;border:1px solid #e4d19a44}.tutorial-progress i.done{background:#e3be69}.npc-dialogue{position:absolute;z-index:8;left:50%;bottom:28px;transform:translateX(-50%);display:grid;grid-template-columns:120px 1fr;width:min(880px,calc(100% - 34px));min-height:190px;border:3px solid #ad884b;background:linear-gradient(#171b1af2,#0e1212f7);box-shadow:0 18px 55px #000c,inset 0 0 0 3px #30271b;padding:18px}.npc-portrait{display:grid;place-items:center;align-self:center;width:90px;height:110px;border:2px solid #79633e;background:linear-gradient(145deg,#a67d58 0 35%,#7a4138 36% 72%,#2b312f 73%);font:700 38px Cinzel;color:#f1ddad;text-shadow:0 3px #402b1f}.npc-copy{display:flex;flex-direction:column}.npc-copy small{color:#d9ad62;text-transform:uppercase;letter-spacing:.14em}.npc-copy h2{margin:6px 0 8px;font:600 clamp(19px,3vw,30px) Cinzel;color:#f2dfb5}.npc-copy p{margin:0;color:#d5d8ce;line-height:1.55;font-size:14px}.tutorial-continue{margin-top:auto;align-self:flex-end;color:#c6b58f;font-size:11px;text-transform:uppercase;letter-spacing:.11em;animation:tutorialPulse 1.2s infinite}.tutorial-continue b{font-size:22px}.tutorial-choices{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.tutorial-choices button{padding:10px 14px;border:1px solid #b58d4f;background:#263629;color:#f1dfba;cursor:pointer;font-weight:700}.tutorial-callout{position:absolute;z-index:7;left:50%;top:16%;transform:translateX(-50%);max-width:680px;padding:10px 18px;border:1px solid #d6b46b;background:#101817de;color:#e8d8b4;text-align:center;font-size:12px;letter-spacing:.04em}.tutorial-callout:empty{display:none}@keyframes tutorialPulse{50%{opacity:.45;transform:translateX(3px)}}
@media(max-width:650px){.tutorial-skip{right:12px;top:12px}.tutorial-progress{left:12px;top:16px}.tutorial-progress i{width:18px}.npc-dialogue{bottom:12px;grid-template-columns:68px 1fr;min-height:205px;padding:12px}.npc-portrait{width:54px;height:74px;font-size:24px}.npc-copy p{font-size:12px}.tutorial-tree{transform:scale(.8)}.tree-a{left:-2%}.tree-b{right:-4%}.tutorial-player{left:39%}.tutorial-npc{left:56%}.tutorial-callout{top:12%;width:calc(100% - 32px)}}
.skill-tutorial-shell{position:fixed;inset:0;z-index:100}.skill-tutorial-scene{filter:saturate(.78) hue-rotate(8deg)}
.look-avatar::before,.look-avatar::after{content:"";position:absolute;z-index:0;top:73px;width:13px;height:48px;background:var(--skin);border:2px solid #39281d;clip-path:polygon(18% 0,82% 0,100% 90%,58% 100%,0 90%)}.look-avatar::before{left:8px;transform:rotate(7deg)}.look-avatar::after{right:8px;transform:rotate(-7deg)}.look-body,.look-legs{z-index:1}