.character-select{
  border-top:1px solid #604628;
  border-bottom:1px solid #604628;
  background:linear-gradient(150deg,#17110c,#0b0908 60%,#160f0b);
}
.character-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:35px;
  max-width:1100px;
  margin:0 auto 37px;
}
.character-heading h2{
  margin:17px 0 0;
  font-size:clamp(38px,4vw,64px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.055em;
  text-transform:uppercase;
}
.character-heading h2 em{color:#e6bd78}
.character-heading p{
  max-width:330px;
  margin:0 0 6px;
  color:#bdac98;
  font-size:12px;
  line-height:1.75;
}
.character-landscape-phone{
  position:relative;
  width:min(100%,1100px);
  aspect-ratio:2.08;
  margin:0 auto;
  padding:10px;
  border:1px solid #b8a795;
  border-radius:49px;
  background:linear-gradient(180deg,#d0c0ad,#51463d 10%,#161414 50%,#8f8172 91%,#e3d2bb);
  box-shadow:inset 0 0 0 2px #1e1c1b,0 0 0 2px #493d33,0 32px 80px #000b;
}
.character-phone-button{
  position:absolute;
  left:19%;
  width:8%;
  height:3px;
  border-radius:3px;
  background:#8f8174;
  box-shadow:inset 0 1px #d0c0ae;
}
.character-phone-button--top{top:-5px}
.character-phone-button--bottom{top:-5px;left:29%;width:5%}
.character-landscape-screen{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:3px solid #060607;
  border-radius:39px;
  background:#111;
}
.character-landscape-island{
  position:absolute;
  z-index:8;
  top:50%;
  left:8px;
  width:21px;
  height:93px;
  transform:translateY(-50%);
  border-radius:20px;
  background:#020303;
  box-shadow:1px 0 0 #37312d;
}
.character-landscape-island:after{
  content:"";
  position:absolute;
  left:9px;
  top:16px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#24313a;
}
.character-game{
  --game-scale:.82;
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#090909 url("../img/character-alesta-bg.jpg") center top/100% auto no-repeat;
  font-family:Tahoma,Verdana,"Segoe UI",sans-serif;
}
.character-game:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#0003,transparent 32%,transparent 87%,#0003);
}
.character-game canvas{
  position:absolute;
  z-index:3;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.character-game:before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse 38% 79% at 62% 57%,transparent 52%,#07060438 100%)}
.character-static-models{position:absolute;z-index:2;inset:4% 1% 3% 37%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.character-static-model{position:absolute;bottom:0;width:44%;height:112%;object-fit:contain;opacity:.43;filter:brightness(.72);transition:opacity .2s,filter .2s,transform .2s}
.character-static-model:nth-child(1){left:-2%}
.character-static-model:nth-child(2){left:15%}
.character-static-model:nth-child(3){left:32%}
.character-static-model:nth-child(4){left:49%}
.character-static-model.is-selected{z-index:1;opacity:1;filter:brightness(1.04) drop-shadow(0 8px 12px #0009);transform:translateY(-2%) scale(1.07)}
.character-static-model.is-creating{animation:static-character-select .7s ease}
@keyframes static-character-select{50%{filter:brightness(1.8) drop-shadow(0 0 18px #f3cb8a);transform:translateY(-4%) scale(1.12)}}
.static-preview-note{position:absolute;z-index:5;right:12px;bottom:10px;padding:6px 8px;background:#090807c9;border:1px solid #b18450;color:#f3d4a5;font:700 9px/1.35 var(--body)}
.character-game canvas[hidden]{display:none}
.character-create-window{
  position:absolute;
  z-index:4;
  top:calc(8px * var(--game-scale));
  left:calc(26px * var(--game-scale));
  width:256px;
  height:478px;
  transform:scale(var(--game-scale));
  transform-origin:top left;
  color:#c7c7c7;
  font:12px/14px Tahoma,Verdana,"Segoe UI",sans-serif;
  user-select:none;
}
.character-name-images{position:absolute;left:0;top:14px;width:256px;height:146px;pointer-events:none}
.character-name-images img{position:absolute;inset:0;display:block;width:256px;height:146px;max-width:none;max-height:none;object-fit:fill;transform:none;visibility:hidden}
.character-name-images img.is-active{visibility:visible;filter:brightness(2) contrast(1.08) drop-shadow(0 0 2px #d4a169) drop-shadow(0 2px 2px #000)}
.character-board{position:absolute;left:27px;top:149px;width:208px;height:329px}
.character-board:before{
  content:"";
  position:absolute;
  inset:0;
  border:16px solid transparent;
  border-image:url("../img/character-ui/thinboard.webp") 16 fill / 16px / 0 repeat;
}
.character-board:after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:6px;
  background:#0005;
  pointer-events:none;
}
.character-board>*{position:absolute;z-index:1}
.character-description{
  left:8px;
  top:10px;
  width:189px;
  height:122px;
  border:1px solid;
  border-color:#2a2521 #aaa6a1 #aaa6a1 #2a2521;
  background:#000;
}
.character-description p{
  position:absolute;
  left:6px;
  top:6px;
  width:175px;
  height:80px;
  margin:0;
  overflow:hidden;
  color:#fff;
  white-space:pre-line;
  line-height:16px;
}
.character-client-button{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:21px;
  padding:0;
  border:0;
  border-radius:0;
  color:#c7c7c7;
  font:12px/21px Tahoma,Verdana,sans-serif;
  text-align:center;
  text-decoration:none;
  background:transparent url("../img/character-ui/btn_middle_01.webp") center/100% 100% no-repeat;
  cursor:pointer;
}
.character-client-button--small{width:43px;background-image:url("../img/character-ui/btn_small_01.webp")}
.character-client-button--small:hover{background-image:url("../img/character-ui/btn_small_02.webp")}
.character-client-button--small:active{background-image:url("../img/character-ui/btn_small_03.webp")}
.character-client-button--middle{width:61px}
.character-client-button--middle:hover{background-image:url("../img/character-ui/btn_middle_02.webp")}
.character-client-button--middle.is-active,.character-client-button--middle:active{background-image:url("../img/character-ui/btn_middle_03.webp");color:#fff}
.character-client-button--large{width:88px;background-image:url("../img/character-ui/btn_large_01.webp")}
.character-client-button--large:hover{background-image:url("../img/character-ui/btn_large_02.webp")}
.character-client-button--large:active{background-image:url("../img/character-ui/btn_large_03.webp")}
.character-client-button:focus-visible,.character-change-arrow:focus-visible,.character-name-input:focus-visible{outline:2px solid #fff;outline-offset:2px}
.character-description-prev{left:95px;top:95px}
.character-description-next{left:140px;top:95px}
.character-stats{position:static}
.character-stat{position:absolute;left:0;top:calc(138px + 19px * var(--row));width:208px;height:19px}
.character-stat-label{position:absolute;left:15px;top:-1px}
.character-stat-gauge{
  position:absolute;
  left:45px;
  top:4px;
  width:120px;
  height:8px;
  border:0 solid transparent;
  border-width:0 16px;
  border-image:url("../img/character-ui/gauge_slot.webp") 0 16 fill / 0 16px / 0 stretch;
}
.character-stat-gauge i{
  position:absolute;
  left:-4px;
  top:0;
  width:calc(96px * var(--fill));
  height:8px;
  background:url("../img/character-ui/gauge_red.webp") repeat-x;
}
.character-stat-gauge[data-color="pink"] i{background-image:url("../img/character-ui/gauge_pink.webp")}
.character-stat-gauge[data-color="purple"] i{background-image:url("../img/character-ui/gauge_purple.webp")}
.character-stat-gauge[data-color="blue"] i{background-image:url("../img/character-ui/gauge_blue.webp")}
.character-stat-value{
  position:absolute;
  left:172px;
  top:-1px;
  width:24px;
  height:16px;
  color:#c7c7c7;
  background:#000;
  box-shadow:inset 1px 1px #333,inset -1px -1px #b3b3b3;
  line-height:15px;
  text-align:center;
}
.character-field-label{position:absolute;left:43px;transform:translateX(-50%);white-space:nowrap}
.character-field-label--name{top:217px}
.character-field-label--gender{top:246px}
.character-field-label--shape{top:269px}
.character-name-slot{
  left:82px;
  top:216px;
  width:115px;
  height:18px;
  background:url("../img/character-ui/slot_name.webp") no-repeat;
}
.character-name-input{
  left:85px;
  top:217px;
  width:90px;
  height:16px;
  padding:0;
  border:0;
  border-radius:0;
  outline:none;
  color:#fff;
  background:transparent;
  font:12px Tahoma,Verdana,sans-serif;
}
.character-board.is-shake .character-name-slot,.character-board.is-shake .character-name-input{animation:character-input-shake .4s}
@keyframes character-input-shake{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.character-gender-controls,.character-shape-controls{left:0;width:208px;height:21px}
.character-gender-controls{top:247px}
.character-shape-controls{top:268px}
.character-gender-controls button:first-child,.character-shape-controls button:first-child{left:79px}
.character-gender-controls button:last-child,.character-shape-controls button:last-child{left:139px}
.character-create-link{left:11px;top:294px}
.character-reset{left:109px;top:294px}
.character-change-arrows{
  position:absolute;
  z-index:5;
  left:63%;
  bottom:5px;
  display:flex;
  gap:14px;
  transform:translateX(-50%) scale(var(--game-scale));
  transform-origin:bottom center;
}
.character-change-arrow{
  width:160px;
  height:36px;
  padding:0;
  border:0;
  background:transparent url("../img/character-ui/arrow_left_01.webp") center/100% 100% no-repeat;
  cursor:pointer;
  filter:drop-shadow(0 2px 3px #000b);
}
.character-change-arrow:hover{background-image:url("../img/character-ui/arrow_left_02.webp")}
.character-change-arrow:active{background-image:url("../img/character-ui/arrow_left_03.webp")}
.character-change-arrow--right{background-image:url("../img/character-ui/arrow_right_01.webp")}
.character-change-arrow--right:hover{background-image:url("../img/character-ui/arrow_right_02.webp")}
.character-change-arrow--right:active{background-image:url("../img/character-ui/arrow_right_03.webp")}
.character-scene-loading{
  position:absolute;
  z-index:7;
  top:50%;
  left:63%;
  transform:translate(-50%,-50%);
  padding:10px 14px;
  color:#fff3d6;
  background:#080706d9;
  border:1px solid #a58458;
  font:700 10px var(--body);
  letter-spacing:.12em;
  white-space:nowrap;
}
.character-scene-loading[hidden]{display:none}
.character-below{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1100px;
  margin:27px auto 0;
}
.character-below>span{color:#b99b72;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.character-below .text-link{margin:0;font-size:10px}
@media(max-width:900px){
  .character-heading{display:block}
  .character-heading p{max-width:620px;margin-top:15px}
  .character-landscape-phone{padding:7px;border-radius:32px}
  .character-landscape-screen{border-radius:25px}
  .character-landscape-island{left:5px;width:14px;height:65px}
}
@media(max-width:520px){
  .character-heading h2{font-size:clamp(35px,9vw,48px)}
  .character-heading p{font-size:11px}
  .character-landscape-phone{padding:4px;border-radius:19px}
  .character-landscape-screen{border-width:2px;border-radius:15px}
  .character-landscape-island{left:3px;width:7px;height:34px}
  .character-landscape-island:after{display:none}
  .character-below{display:block}
  .character-below>span{display:block}
  .character-below .text-link{margin-top:12px}
  .static-preview-note{display:none}
}
@media(max-width:900px) and (max-height:480px) and (orientation:landscape){
  .character-landscape-phone{width:min(100%,calc((100svh - 90px) * 2.08))}
}
@media(prefers-reduced-motion:reduce){
  .character-select *{animation:none!important;transition:none!important}
}