.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:930/442;
  margin:0 auto;
  padding:0;
  border:0;
  background:transparent;
  filter:drop-shadow(0 32px 48px #000c);
}
.character-phone-frame{
  position:absolute;
  z-index:9;
  top:50%;left:50%;
  width:47.53%;height:210.4%;
  display:block;
  object-fit:fill;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center;
  pointer-events:none;
}
.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:97.8%;
  height:95.7%;
  margin:1.1% 1.1%;
  overflow:hidden;
  border:0;
  border-radius:clamp(17px,3vw,38px);
  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:clip;
  background:transparent;
  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:0;pointer-events:none}
.character-static-model{position:absolute;bottom:-41%;left:62%;width:auto;height:150%;max-width:none;object-fit:contain;opacity:.5;filter:brightness(.78);transform:translate(-50%,0%);transition:left .3s,opacity .2s,filter .2s,transform .3s}
.character-static-model[data-slot="0"]{z-index:4;left:62%;opacity:1;filter:brightness(1.04) drop-shadow(0 8px 12px #0009);transform:translate(-50%,0%) scale(1.01)}
.character-static-model[data-slot="1"]{z-index:3;left:45.5%;transform:translate(-50%,0%) scale(.84)}
.character-static-model[data-slot="2"]{z-index:1;left:62%;opacity:.18;transform:translate(-50%,0%) scale(.72)}
.character-static-model[data-slot="3"]{z-index:3;left:78.5%;transform:translate(-50%,0%) scale(.84)}
.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:translate(-50%,0%) scale(1.12)}}
.static-preview-note{display:none}
.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-name-localized{display:none;position:absolute;top:79px;left:0;width:256px;text-align:center;color:#d73e25;font:900 22px/1.1 Georgia,serif;text-transform:uppercase;text-shadow:1px 2px 2px #100700,0 0 4px #100700}
html:not([lang="tr"]) .character-name-images img.is-active{clip-path:inset(0 0 64px 0)}
html:not([lang="tr"]) .character-name-localized{display:block}
.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:50%;
  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")}
html[data-open-mode="file"] .character-change-arrows{left:62%}
.character-scene-loading{
  position:absolute;
  z-index:7;
  top:50%;
  left:50%;
  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-screen{border-radius:25px}
  html[data-open-mode="file"] .character-game{--game-scale:.6}
}
@media(max-width:700px){html[data-open-mode="file"] .character-game{--game-scale:.44}}
@media(max-width:520px){
  .character-heading h2{font-size:clamp(35px,9vw,48px)}
  .character-heading p{font-size:11px}
  .character-landscape-screen{border-radius:15px}
  .character-below{display:block}
  .character-below>span{display:block}
  .character-below .text-link{margin-top:12px}
  .static-preview-note{display:none}
  .character-change-arrow{position:relative}
  .character-change-arrow:before{content:"";position:absolute;inset:-52px -12px;display:block}
  html[data-open-mode="file"] .character-game{--game-scale:.3}
}
@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}
}

.character-start-dialog{width:min(480px,calc(100% - 32px));max-width:480px;max-height:calc(100dvh - 32px);padding:8px;border:1px solid #c99751;background:#120c08;color:#f7e9d0;box-shadow:0 32px 90px #000e,0 0 38px #cf8c3038}
.character-start-dialog::backdrop{background:#050302dc;backdrop-filter:blur(8px)}
.character-start-dialog-inner{position:relative;overflow:hidden;padding:clamp(25px,5vw,42px);border:1px solid #8c5e31;background:radial-gradient(circle at 50% 0,#5f311d61,transparent 60%),linear-gradient(155deg,#24150e,#0b0806 74%);text-align:center}
.character-start-dialog-inner::before,.character-start-dialog-inner::after{content:"";position:absolute;width:38px;height:38px;border-color:#e6b76d;pointer-events:none}
.character-start-dialog-inner::before{top:10px;left:10px;border-top:1px solid;border-left:1px solid}
.character-start-dialog-inner::after{right:10px;bottom:10px;border-right:1px solid;border-bottom:1px solid}
.character-start-kicker{color:#d7a85f;font:800 10px var(--body);letter-spacing:.2em}
.character-start-dialog h2{margin:20px 0 8px;color:#fff0d0;font:800 clamp(26px,5vw,39px)/1.1 var(--display)}
.character-start-dialog p{margin:0;color:#f5c880;font:700 clamp(19px,4vw,26px)/1.25 var(--display)}
.character-start-selection{display:block;margin:23px auto 27px;color:#cab390;font:700 12px var(--body);letter-spacing:.1em;overflow-wrap:anywhere}
.character-start-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.character-start-actions .button{min-height:46px;cursor:pointer}
.character-start-progress{display:block;width:100%;height:2px;margin-top:28px;background:#6c4427}
.character-start-progress::after{content:"";display:block;width:0;height:100%;background:#ffd38b;box-shadow:0 0 12px #f1a846;animation:character-start-countdown 4s linear forwards}
@keyframes character-start-countdown{to{width:100%}}
@media(max-width:520px){.character-start-dialog-inner{padding:29px 18px}.character-start-actions .button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.character-start-progress::after{animation:none;width:100%}}

/* Lonex Oldschool tanıtım yerleşimi */
.lonex-character-select{
  position:relative;
  margin:0;
  overflow:hidden;
  border:0;
  background:#170d08;
  isolation:isolate;
}
.lonex-character-background{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  height:auto;
}
.lonex-character-mobile-cap{display:none}
.lonex-character-stage{
  position:absolute;
  z-index:2;
  top:34%;
  left:0;
  right:0;
  bottom:4.4%;
}
.lonex-character-stage .character-game{
  width:100%;
  height:calc(100% - 24px);
  overflow:hidden;
  background:transparent;
}
.lonex-character-stage .character-game:before{
  display:none;
}
.lonex-character-stage .character-game:after{
  display:none;
}
.lonex-character-stage .character-game canvas{
  height:var(--model-height,100%)!important;
  filter:none;
}
.lonex-character-stage .character-create-window{
  filter:none;
}
.lonex-character-stage .character-create-link{font-size:10px}
.lonex-character-stage .character-below{
  position:absolute;
  left:26px;
  right:26px;
  bottom:0;
  margin:0;
  pointer-events:none;
}
.lonex-character-stage .character-below>span{
  color:#d9af70;
  text-shadow:0 2px 8px #000;
}

@media(max-width:767px){
  .lonex-character-select{overflow:hidden}
  .lonex-character-background{display:none!important}
  .lonex-character-mobile-cap{
    display:block;
    width:100%;
    aspect-ratio:1080/390;
    background:url("../images/karaktersiniflari.png") center top/100% auto no-repeat;
  }
  .lonex-character-stage{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height:1020px;
    background:#170d08;
  }
  .lonex-character-stage:before{
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    left:0;
    right:0;
    height:440px;
    background-color:#21120c;
    background-image:url("../images/karaktersiniflari.png");
    background-repeat:no-repeat;
    background-position:center -265px;
    background-size:auto 760px;
  }
  .lonex-character-stage .character-game{
    height:100%;
    background:transparent;
  }
  .lonex-character-stage .character-game canvas{
    top:0;
    bottom:auto;
    height:var(--model-height,420px)!important;
  }
  .lonex-character-stage .character-game:before,
  .lonex-character-stage .character-game:after{
    top:0;
    bottom:auto;
    height:var(--model-height,420px);
  }
  .lonex-character-stage .character-create-window{
    top:455px;
    left:50%;
    transform:translateX(-50%) scale(var(--game-scale));
    transform-origin:top center;
  }
  .lonex-character-stage .character-change-arrows{
    top:390px;
    bottom:auto;
    transform:translateX(-50%) scale(.55);
  }
  .lonex-character-stage .character-scene-loading{
    top:205px;
  }
  .lonex-character-stage .character-below{
    left:14px;
    right:14px;
    bottom:14px;
    justify-content:center;
    text-align:center;
  }
}