body { background-color:var(--bgInverse);margin:0px;overflow:hidden;
  
  
  --bg0: #e5e5e5;
  --bg1: #ececec;
  --bg2: #d5d5d5;
  --bgInverse: #444;
  --bgBorder: #bdbdbd;
  
  --bgStroke: var(--bg1) 5px 0px 0px, var(--bg1) 4.90033px 0.993347px 0px, var(--bg1) 4.60531px 1.94709px 0px, var(--bg1) 4.12668px 2.82321px 0px, var(--bg1) 3.48353px 3.58678px 0px, var(--bg1) 2.70151px 4.20736px 0px, var(--bg1) 1.81179px 4.6602px 0px, var(--bg1) 0.849836px 4.92725px 0px, var(--bg1) -0.145998px 4.99787px 0px, var(--bg1) -1.13601px 4.86924px 0px, var(--bg1) -2.08073px 4.54649px 0px, var(--bg1) -2.94251px 4.04248px 0px, var(--bg1) -3.68697px 3.37732px 0px, var(--bg1) -4.28444px 2.57751px 0px, var(--bg1) -4.71111px 1.67494px 0px, var(--bg1) -4.94996px 0.7056px 0px, var(--bg1) -4.99147px -0.291871px 0px, var(--bg1) -4.83399px -1.27771px 0px, var(--bg1) -4.48379px -2.2126px 0px, var(--bg1) -3.95484px -3.05929px 0px, var(--bg1) -3.26822px -3.78401px 0px, var(--bg1) -2.4513px -4.35788px 0px, var(--bg1) -1.53666px -4.75801px 0px, var(--bg1) -0.560763px -4.96846px 0px, var(--bg1) 0.437495px -4.98082px 0px, var(--bg1) 1.41831px -4.79462px 0px, var(--bg1) 2.34258px -4.41727px 0px, var(--bg1) 3.17346px -3.86382px 0px, var(--bg1) 3.87783px -3.15633px 0px, var(--bg1) 4.4276px -2.32301px 0px, var(--bg1) 4.80085px -1.39708px 0px, var(--bg1) 4.98271px -0.415447px 0px;
  
  --bgStroke: var(--bg1) 2px 0px 0px, var(--bg1) 1.75517px 0.958851px 0px, var(--bg1) 1.0806px 1.68294px 0px, var(--bg1) 0.141474px 1.99499px 0px, var(--bg1) -0.832294px 1.81859px 0px, var(--bg1) -1.60229px 1.19694px 0px, var(--bg1) -1.97999px 0.28224px 0px, var(--bg1) -1.87291px -0.701566px 0px, var(--bg1) -1.30729px -1.51361px 0px, var(--bg1) -0.421592px -1.95506px 0px, var(--bg1) 0.567324px -1.91785px 0px, var(--bg1) 1.41734px -1.41108px 0px, var(--bg1) 1.92034px -0.558831px 0px;
  
  --accent: #18778C;
  
  --icon: url(larpsccico.png);
  --banner: url(780000-Mari.png);
  --flower: url(Stult-Flower3.png);
  
  --body: 'Inter', sans-serif;
  --title: 'DM Sans', sans-serif;
}

.dc-char-icon2 { 
    height:100%;
    width:100%;
    background-image:var(--icon);
    background-size:cover;
    background-position: left center;
    border-radius:100%;
    position:relative;
    z-index:1;
}


a { text-decoration:none;color:var(--bgInverse); }

.dc-body { padding:20px; filter:sepia(0%); background-color:var(--bg1); height:100vh; box-sizing: border-box; }
.dc-body2 { border:solid 1px var(--bgBorder);height:calc(100vh - 40px);border-radius:15px;background-color:var(--bg1); }

.dc-char { display:grid;grid-template-columns:1fr 2fr;height:calc(100vh - 40px);position:relative; }
.dc-char-color { position:absolute;z-index:10;pointer-events:none;height:75vh;width:75vh;bottom:-1px;left:-1px;background:radial-gradient(circle at bottom left,var(--accent),transparent 70%);opacity:.25;border-radius:14px; }
.dc-char-left { padding:clamp(35px,6vw,100px); display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;position:relative;border-right:solid 1px var(--bgBorder); }
.dc-char-right { display:flex;flex-direction:column;position:relative; }
/*.dc-char {}*/

.dc-char-return { display:block;position:absolute;top:65px;left:65px;z-index:50;font:500 12px / 15px var(--body);white-space:nowrap;text-transform:uppercase;letter-spacing:.35px;text-shadow:var(--bgStroke); }
.dc-char-return div { background-color:var(--bgInverse);height:50px;width:50px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--bg1);font:200 28px / 15px var(--title);margin-bottom:15px;padding:0px 3px 4px 1px;text-shadow:none; }
.dc-char-return div::before { content:'<';display:block; }
.dc-char-flower { -webkit-mask-image:var(--flower);mask-image:var(--flower); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;top:0px;left:0px;height:535px;width:410px;transform:scaleY(-1) scaleX(-1); }
.dc-char-flower::before { content:'';display:block;height:100%;width:100%;background-color:var(--bgBorder); }
.dc-char-icon { border:solid 1px var(--bgBorder);padding:24px;height:250px;width:250px;border-radius:100%;box-sizing:border-box;margin-left:-10px;position:relative;background-color:var(--bg1); }
.dc-char-icon::before { display:block;content:'';border-radius:100%;background-color:var(--accent);position:absolute;box-sizing:border-box;height:12px;width:12px;bottom:23px;left:37px;box-shadow:0px 0px 0px 10px var(--bg1); }
.dc-char-icon::after { display:block;content:'';border-radius:100%;background-color:var(--accent);position:absolute;box-sizing:border-box;height:20px;width:20px;top:25px;right:27px;box-shadow:0px 0px 0px 10px var(--bg1); }
.dc-char-icon2 { height:100%;width:100%;background-image:var(--icon);background-size:cover;background-position:center;border-radius:100%;position:relative;z-index:1; }
.dc-char-left h2 { margin:35px 0px 30px 0px;font:900 65px / 65px var(--title);letter-spacing:-1px;text-align:right;text-transform:uppercase;padding-left:clamp(20px,3vw,50px);position:relative;z-index:1; }
.dc-char-left h2 div { font:900 125px / 125px var(--title);text-transform:none;letter-spacing:-4px;background:linear-gradient(to bottom,var(--accent),var(--bgInverse) 75%);background-clip: text;-webkit-background-clip: text;color: transparent;padding-right:10px;margin-right:-10px; }
.dc-char-start { display:flex;justify-content:flex-end;flex:flex-wrap;gap:10px;margin-bottom:20px; }
.dc-char-start div { border:solid 1px var(--bgBorder);box-sizing:border-box;padding:14px;font:500 12px / 12px var(--body);text-transform:uppercase;border-radius:10px;background-color:var(--bg0); }
.dc-char-left p { display:flex;align-items:center;justify-content:flex-end;border-right:solid 1px var(--bgBorder);padding-right:35px;text-align:right;margin-bottom:0px;box-sizing:border-box;font:14px / 21px var(--body);max-width:300px;position:relative;z-index:1; }
.dc-char-left p::before { content:'';display:block;position:absolute;background-color:var(--accent);height:10px;width:10px;box-shadow:0px 0px 0px 15px var(--bg1);border-radius:100%;margin-right:-40px; }

.dc-char-banner { height:250px;border-radius:0px 15px 0px 0px;margin:-1px -1px 0px 0px;position:relative;z-index:2;/*mask-image:linear-gradient(to bottom,#000 0%,transparent);*/margin-bottom:-116px;filter:grayscale(0%);pointer-events:none;overflow:hidden;display:none; }
.dc-char-banner2 { background-color:var(--accent);background-image:var(--banner);background-size:cover;background-position:center;background-blend-mode:multiply;height:100%;width:100%;border-radius:0px 15px 0px 0px; }
.dc-char-menu { padding:30px;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;position:relative;z-index:3;overflow:hidden;margin-bottom:-1px; }
.dc-char-menu::before { content:'';display:block;position:absolute;height:600px;width:600px;border:solid 1px var(--bgBorder);border-radius:100%;top:-430px;left:-125px;}
.dc-char-menu::after { content:'';display:block;position:absolute;height:300px;width:300px;border:solid 1px var(--bgBorder);border-radius:100%;bottom:-245px;right:-150px;}
.dc-char-sub-menu::before { content:'';display:block;position:absolute;border:solid 1px var(--bgBorder);border-radius:100%;width:9px;height:9px;background-color:var(--bg2);bottom:-6px;left:-6px; }
.dc-char-menu a { display:block;font:500 12px / 12px var(--body);text-transform:uppercase;letter-spacing:1px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:15px;border:solid 1px var(--bgBorder);box-shadow:inset 0px 0px 0px 2px var(--bg1);box-shadow:none;border-radius:8px;white-space:nowrap;transition:.2s;box-sizing:border-box;position:relative;z-index:1;background-color:var(--bg1); }
.dc-char-menu a:hover { background-color:var(--bg2); }
.dc-char-menu a:nth-child(1) { background-color:var(--bgInverse);border-color:transparent;color:var(--bg1); }
.dc-char-menu a:nth-child(1)::after { height:15px;width:15px;content:'';display:block;background-color:var(--bg1);transform:rotate(45deg);position:absolute;bottom:-39px;border-radius:5px 0px;border-left:solid 1px var(--bgBorder);border-top:solid 1px var(--bgBorder);transition:.2s; }
.dc-char-sub-menu { padding:35px;display:flex;gap:15px;justify-content:flex-start;border-bottom:solid 1px var(--bgBorder);position:relative;display:none; }
.dc-char-sub-menu a { font: 900 12px / 12px var(--body);text-transform:uppercase;letter-spacing:1px;display:flex;gap:15px;align-items:center; }
.dc-char-sub-menu a:last-of-type { flex-grow:1; }
.dc-char-sub-menu a::after { content:'';display:block;height:1px;background-color:var(--bgBorder);min-width:20px;flex-grow:1; }

.dc-char-bulk { background-color:var(--bg1);flex-grow:1;border-radius:0px 0px 14px 0px;border-left:solid 1px var(--bgBorder);margin-left:-15px;border-radius:15px 0px 14px 0px;border-top:solid 1px var(--bgBorder); }
.dc-char-bulk2 { padding:50px; }
.dc-char-basics { display:grid;grid-template-columns: auto 1fr;gap:30px; }



.dc-char-hp h1 { margin:0px;border:solid 0px var(--bgBorder);border-top:0px;border-radius:0px 0px 28px 28px;background-color:var(--bg1);font:800 11px / 10px var(--body);text-transform:uppercase;padding:8px 22px 15px 25px;letter-spacing:3px;white-space:nowrap;position:relative; }
.dc-char-hp h1::before { content:'';display:block;height:20px;width:20px;border-radius:0px 10px 0px 0px;box-shadow:10px -10px 0px var(--bg1);position:absolute;top:0px;left:-20px; }
.dc-char-hp h1::after { content:'';display:block;height:20px;width:20px;border-radius:10px 0px 0px 0px;box-shadow:-10px -10px 0px var(--bg1);position:absolute;top:0px;right:-20px; }
.dc-char-hp h2 {text-shadow: 10px 10px 4px rgba(0,0,0,1);  color: #ffffff!important;   margin:0px 0px 25px 0px;flex-grow:1;text-align:center;display:flex;flex-direction:column;justify-content:center;font:800 16px / 10px var(--body);text-transform:uppercase;letter-spacing:.5px;z-index: 10; }
.dc-char-hp span { border:none;background:transparent;padding:0px;margin:0px;width:125px;font:900 84px / 85px var(--title);color:var(--bg1);text-align:center; }

.dc-char-basics1 { flex-grow:1;display:flex;flex-direction:column;gap:15px; }
.dc-char-scores { display:grid;grid-template-columns:repeat(6,1fr);gap:15px;box-sizing:border-box;border:solid 1px var(--bgBorder);border-radius:10px;padding:29px;position:relative;overflow:hidden;flex-grow:1; }
.dc-char-scores::before { content:'';display:block;-webkit-mask-image:var(--flower);mask-image:var(--flower);position:absolute;top:-100px;right:-70px;height:535px;width:1080px;transform:scaleY(-1) scaleX(-1);background-color:var(--bgBorder); }
.dc-char-score { border:solid 1px var(--bgBorder);border-radius:10px;background-color:var(--bg1);position:relative;align-self:stretch;min-height:0px;aspect-ratio:1/1.1;display:flex;flex-direction:column;align-items:center; }
.dc-char-score h1 { margin:0px;border:solid 1px var(--bgBorder);border-top:0px;border-radius:0px 0px 10px 10px;background-color:var(--bg2);font:800 11px / 10px var(--body);text-transform:uppercase;padding:10px 7px 10px 10px;letter-spacing:3px; }
.dc-char-score h2 { font:900 45px / 45px var(--body);flex-grow:1;margin:0px 0px 25px 0px;display:flex;align-items:center; }
.dc-char-score input { display:none; }
.dc-char-score h3 { margin:0px;background-color:var(--accent);background: linear-gradient(to bottom, #1a2330, #0e1620);height:40px;width:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;position:absolute;bottom:-10px;font:800 15px / 15px var(--body);color:var(--bg1);box-shadow:0px 0px 0px 5px var(--bg1); }
.dc-char-score h3::before { content:'+';position:absolute;left:-8px;text-shadow:var(--bgStroke);color:var(--bgInverse);font:900 17px / 20px var(--body); }


.dc-char-move { display:flex;gap:10px;font:500 12px / 12px var(--body);letter-spacing:.5px;align-items:flex-start; }
.dc-char-init {
    display: flex;
    gap: 10px;
    background-color: var(--bgInverse);
    padding: 6px;
    border-radius: 10px;
    flex-grow: 10;
    height: 50px;
    align-items: center; 
    max-width: 480px;
}
.dc-char-init-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    background-color: transparent;
    color: var(--bg1);
    font: 500 12px / 12px var(--body);
    letter-spacing: 1px;
    padding: 0px 15px;
    text-transform: uppercase;
    opacity: 0.85;
}

.dc-char-init-btn i {
    font-size: 16px;
    line-height: 16px;
}
.dc-char-speeds, .dc-char-senses { display:flex;gap:10px;flex-grow:1; cursor: pointer}
.dc-char-speeds div, .dc-char-senses div { position: relative;overflow: hidden;display:flex;gap:5px;align-items:center;padding-right:15px;border:solid 1px var(--bgBorder);border-radius:10px;flex-grow:1;height:50px;transition: box-shadow 0.1s ease; }
.dc-char-speeds div i, .dc-char-senses div i { display:block;background-color:var(--bgInverse);margin:5px;border-radius:7px;color:var(--bg1);padding:10px;font-size:20px;line-height:20px;align-self:stretch;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; }
.dc-char-move2 { display:flex;gap:10px;flex-grow:1; }



/*=====================================================================================END HELLOCCSS-----------------------------------------------------------------------------------------------------*/



/*=========================================PAGECLICK===================================================*/
.dc-directory {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dc-directory-menu {
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--b2);
}

.dc-directory-menu a {
  padding: 12px 16px;
  border-radius: 8px;
  border:solid 1px var(--bgBorder);box-shadow:inset 0px 0px 0px 2px var(--bg1);box-shadow:none;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  transition: 0.2s;
  z-index: 0;
  overflow: hidden;
  position: relative;
}

.dc-directory-menu a:hover {
  background-color:var(--bg2);
}

.dc-directory-menu a.active {
  background-color:var(--bgInverse);
  color: white;
  border-color: transparent;
}

.dc-directory-menu a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: -1; /* impo */
}
.dc-directory-menu a:active::after {
    opacity: 1;
}
/* ========================= */
/* FULL DIRECTORY LAYOUT */
/* ========================= */

.dc-directory-header {
  padding: 40px 50px 20px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dc-directory-header h1 {
  font-size: 42px;
  font-weight: 800;
  text-transform: uppercase;
  color: #3b3b3d;
}

.dc-directory-header span {
  font-size: 14px;
  color: var(--f3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dc-directory-search {
  padding: 0 50px 30px 50px;
}

.dc-directory-search input {
  width: 100%;
  max-width: 500px;
  height: 50px;
  border-radius: 10px;
  border: 1px solid var(--b2);
  padding: 0 20px;
  font-size: 14px;
  background: var(--bg1);
  transition: border 0.15s ease;
  outline: none;  
}

.dc-directory-search input:focus {
  border: 1px solid var(--b2);
  box-shadow: 0 0 0 0.5px #0d0d0e

}

.dc-directory-grid {
  flex: 1;
  padding: 0 50px 50px 50px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  overflow-y: auto;
  padding-top: 5px;
}

.dc-card {
  background: var(--bg1);
  border: 1px solid var(--b2);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: 0.2s;
  position: relative;
}

.dc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.dc-card h2 {
  font-size: 18px;
  font-weight: 700;
  
}

.dc-card p {
  font-size: 13px;
  color: var(--f3);
}

.dc-card span {
  margin-top: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--f4);
}

/*-------------------------------------------IMGINCARD-----------------------------------------------------*/


.dc-card-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  
  opacity: 0.8; /* Kleopatra */
  pointer-events: none; /* OG */
}



.signal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: 220px;
  width: 220px;
  opacity: 0.8; 
  pointer-events: none; 
}
.crawlbase {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);

  height: 80px;
  width: 80px;
  opacity: 0.8; 
  pointer-events: none; 
}




.dc-card .tsproxy {
  position: absolute;
  right: 25px;
  top: 86%;
  transform: translateY(-50%);
  height: 50px; 
}