:root { --ink: #23221f; --ink-soft: #4a463f; }

body {
  margin: 0;
  background: #6f6f6f;
  min-height: 100vh;
  overflow: hidden;                  
  font-family: var(--font, "Inter", system-ui, sans-serif);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #111; color: #fff; padding: 8px 12px; border-radius: 6px;
}
.skip:focus { left: 8px; top: 8px; }

 

.stage-root {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  aspect-ratio: 5 / 3;
  

  width: min(100vw, calc(95vh * 5 / 3));
  container-type: inline-size;
  user-select: none;
}

.layer, .con-canvas, .btn-art {
  position: absolute;
  display: block;
  pointer-events: none;
}
.layer { width: 100%; height: 100%; object-fit: fill; }



.l-bg            { z-index: 1; }
.l-contour       { z-index: 3; }
.con-canvas      { z-index: 3; }  
.l-fg            { z-index: 4; }
.l-menu, .l-traits-panel, .l-actions-panel, .l-logo { z-index: 5; }
.l-traits-ui, .l-rarity { z-index: 6; }


.hotspots        { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.tabs .tab, .tchip, .tvrow { pointer-events: auto; }


.tvalues { pointer-events: auto; }

 
.con-canvas { image-rendering: auto; }

 

.tabs .tab {
  position: absolute;
  display: block;
  border-radius: 6px;
  text-indent: -9999px;            
  overflow: hidden;
}
.tab-active { cursor: default; }
.tabs .tab:focus-visible { outline: 3px solid #ffd24a; outline-offset: 1px; text-indent: 0; }

 

.rows .rv,
.rows .rp,
.rows .rn { position: absolute; }



.rows .rv {
  display: block;
  padding: 0 0.4cqw;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.15cqw;
  line-height: 3cqw;                  
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.rows .row.is-occluded .rv { opacity: 0.35; }

 
.rows .rp, .rows .rn {
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer; border-radius: 5px;
}
.rows .rp:focus-visible, .rows .rn:focus-visible { outline: 3px solid #ffd24a; outline-offset: 0; }
.rows .rp:active, .rows .rn:active { background: rgba(0,0,0,0.10); }
.rows .row.is-occluded .rp, .rows .row.is-occluded .rn { cursor: default; }

.occluded-tag {
  position: absolute; left: 5.3%; width: 9.5%;
  color: #b23; font-size: 0.85cqw; font-weight: 700; text-align: center;
  pointer-events: none;
}

 

.act {
  position: absolute; z-index: 10;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer; border-radius: 8px;
}
.act .btn-art { width: 100%; height: 100%; object-fit: fill; }
.act:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }
.act:active { transform: translateY(1px); }
.act.is-flash .btn-art { filter: brightness(1.18) saturate(1.1); }

 

.rarity-text {
  position: absolute; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;    
  gap: 0.1cqw; padding: 0.35cqw 0.8cqw 0;
  text-align: center; color: var(--ink);
  text-transform: uppercase; line-height: 1.0;
}
.rarity-text .score-head { margin: 0; font-weight: 900; font-size: 1.12cqw; letter-spacing: -0.02em; }
.rarity-text .score-of   { font-weight: 800; font-size: 0.78cqw; margin-top: -0.08cqw; }
.rarity-text .score-sub  { margin: 0.28cqw 0 0; font-weight: 800; font-size: 0.82cqw; }
.rarity-text .score-pct  { margin: 0.05cqw 0 0; font-weight: 800; font-size: 0.78cqw; }
.rarity-text .score-exists { margin: 0.12cqw 0 0; font-weight: 700; font-size: 0.66cqw; text-transform: none; color: var(--ink-soft); }
.wos-tag {
  position: absolute; z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 1px;
  transform: translateX(-100%) rotate(4deg); transform-origin: 100% 0;
  font-size: var(--tag, 15px); padding: 0.33em 0.66em 0.4em; border: 2px solid #1b1d1e; border-radius: 0.4em;
  background: #b0261c; color: #fff; text-decoration: none; text-align: center; white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  font-family: "Lilita One", "Arial Black", sans-serif; font-weight: 400; text-transform: uppercase;
  pointer-events: auto; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.wos-tag[hidden] { display: none; }
.wos-tag .wos-price { font-size: 1em; letter-spacing: 0.02em; line-height: 1; }
.wos-tag .wos-go { font-size: 0.68em; letter-spacing: 0.04em; line-height: 1; opacity: 0.92; }
.wos-tag:hover, .wos-tag:focus-visible { background: #8f1d15; transform: translateX(-100%) rotate(0deg); }

 

.rare-toggle {
  position: absolute; z-index: 10;
  left: 3.2%; top: 78.2%; width: 24%; height: 5%;
  display: flex; align-items: center; gap: 0.5cqw;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink); font-weight: 800; font-size: 1.05cqw; text-transform: uppercase;
}
.rare-toggle .box {
  width: 1.5cqw; height: 1.5cqw; border: 0.22cqw solid var(--ink); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.rare-toggle[aria-pressed="true"] .box::after { content: "✓"; font-size: 1.15cqw; line-height: 1; }
.rare-toggle:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }

.breakdown {
  position: absolute; z-index: 11;
  left: 3.2%; top: 66.5%; width: 24%; height: 19%;
  overflow: auto; padding: 0.4cqw 0.6cqw;
  background: rgba(238,234,224,0.96); border-radius: 8px;
  box-shadow: 0 0.3cqw 1cqw rgba(0,0,0,0.25);
  color: var(--ink); font-size: 0.85cqw;
}
.breakdown[hidden] { display: none; }
.breakdown ul { list-style: none; margin: 0; padding: 0; }
.breakdown li { display: flex; justify-content: space-between; gap: 0.5cqw; padding: 0.12cqw 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.breakdown li span:last-child { color: var(--ink-soft); white-space: nowrap; }
.breakdown .formula { margin: 0.35cqw 0 0; font-size: 0.72cqw; color: var(--ink-soft); }

 

.error {
  position: absolute; z-index: 30; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64%; max-width: 520px; background: #1a1a1a; color: #f4f4f4;
  border-radius: 12px; padding: 20px 22px; text-align: center;
}
.error[hidden] { display: none; }
.error .btn { margin-top: 12px; padding: 8px 16px; border: 0; border-radius: 8px; background: #ffd24a; font-weight: 800; cursor: pointer; }

.count {
  position: absolute; z-index: 12; left: 0; bottom: -1.4cqw; width: 100%;
  text-align: center; color: #cfcfcf; font-size: 0.9cqw; margin: 0;
  pointer-events: none;
}
.unresolved-note {
  position: absolute; z-index: 12; left: 2%; bottom: -3.4cqw; width: 96%;
  color: #d9d2c4; font-size: 0.82cqw; margin: 0; text-align: center;
}
.unresolved-note[hidden] { display: none; }

 
 
.l-bg{left:0%;top:0%;width:100%;height:100%}
.l-contour{left:29.8%;top:14.333%;width:40.433%;height:67.444%}
.l-fg{left:0%;top:0%;width:100%;height:100%}
.l-menu{left:14.733%;top:0.778%;width:70.5%;height:19.833%}
.l-traits-panel{left:0.7%;top:13.333%;width:28.933%;height:73.778%}
.l-traits-ui{left:2.1%;top:21.778%;width:26%;height:44.611%}
.l-actions-panel{left:70.367%;top:13.333%;width:28.933%;height:73.778%}
.l-rarity{left:73.4%;top:71.722%;width:22.933%;height:12.833%}
.l-logo{left:32.6%;top:81%;width:35.067%;height:18.722%}
.con-canvas{left:31.01%;top:16.35%;width:38.01%;height:63.4%}
.btn-roll{left:72.433%;top:22.722%;width:24.6%;height:9%}
.btn-rare{left:72.433%;top:32.389%;width:24.6%;height:9%}
.btn-reset{left:72.433%;top:42.111%;width:24.6%;height:9%}
.btn-copy{left:72.433%;top:52.111%;width:24.6%;height:9%}
.btn-download{left:72.433%;top:62.167%;width:24.6%;height:9%}
.rarity-text{left:73.4%;top:75.3%;width:22.933%;height:10.2%}
.row-0 .rv{left:17.47%;top:21.8%;width:7.46%;height:5%}
.row-0 .rp{left:15.1%;top:21.8%;width:1.9%;height:5%}
.row-0 .rn{left:25.4%;top:21.8%;width:1.9%;height:5%}
.row-1 .rv{left:17.47%;top:27.2%;width:7.46%;height:5%}
.row-1 .rp{left:15.1%;top:27.2%;width:1.9%;height:5%}
.row-1 .rn{left:25.4%;top:27.2%;width:1.9%;height:5%}
.row-2 .rv{left:17.47%;top:32.6%;width:7.46%;height:5%}
.row-2 .rp{left:15.1%;top:32.6%;width:1.9%;height:5%}
.row-2 .rn{left:25.4%;top:32.6%;width:1.9%;height:5%}
.row-3 .rv{left:17.47%;top:38.1%;width:7.46%;height:5%}
.row-3 .rp{left:15.1%;top:38.1%;width:1.9%;height:5%}
.row-3 .rn{left:25.4%;top:38.1%;width:1.9%;height:5%}
.row-4 .rv{left:17.47%;top:43.7%;width:7.46%;height:5%}
.row-4 .rp{left:15.1%;top:43.7%;width:1.9%;height:5%}
.row-4 .rn{left:25.4%;top:43.7%;width:1.9%;height:5%}
.row-5 .rv{left:17.47%;top:49.3%;width:7.46%;height:5%}
.row-5 .rp{left:15.1%;top:49.3%;width:1.9%;height:5%}
.row-5 .rn{left:25.4%;top:49.3%;width:1.9%;height:5%}
.row-6 .rv{left:17.47%;top:54.7%;width:7.46%;height:5%}
.row-6 .rp{left:15.1%;top:54.7%;width:1.9%;height:5%}
.row-6 .rn{left:25.4%;top:54.7%;width:1.9%;height:5%}
.row-7 .rv{left:17.47%;top:60.2%;width:7.46%;height:5%}
.row-7 .rp{left:15.1%;top:60.2%;width:1.9%;height:5%}
.row-7 .rn{left:25.4%;top:60.2%;width:1.9%;height:5%}
.tab-0{left:18%;top:1.2%;width:10.5%;height:8.6%}
.tab-1{left:29%;top:1.2%;width:5.8%;height:8.6%}
.tab-2{left:35%;top:1.2%;width:10.2%;height:8.6%}
.tab-3{left:45.8%;top:1.2%;width:8.4%;height:8.6%}
.tab-4{left:55.5%;top:1.2%;width:6.3%;height:8.6%}
.tab-5{left:63.2%;top:1.2%;width:9%;height:8.6%}
.tab-6{left:72.6%;top:1.2%;width:10.2%;height:8.6%}

 
.toast {
  position: absolute; z-index: 20; right: 3%; top: 52.5%;
  background: #23221f; color: #fff; padding: 0.5cqw 0.9cqw; border-radius: 7px;
  font-size: 0.95cqw; font-weight: 700; margin: 0; white-space: nowrap;
  box-shadow: 0 0.3cqw 0.9cqw rgba(0,0,0,0.3);
}
.toast[hidden] { display: none; }



#stage.con-canvas {
  position: absolute;
  

  left: 31.01%; top: 9%; width: 38.01%; height: 63.4%;
  display: block; image-rendering: auto;
}



#pickers.rows {
  position: absolute; inset: auto;
  left: 2.6%; top: 20.8%; width: 25.6%; height: 55%;
  display: flex; flex-direction: column;
  z-index: 10;
}

 
.ttypes {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45cqw;
  padding: 0.7cqw 0.1cqw 0.6cqw; flex: 0 0 auto;  
}
.tchip {
  display: flex; flex-direction: column; align-items: center; gap: 0.2cqw;
  padding: 0.45cqw 0.15cqw; border: 0; cursor: pointer;
  background: rgba(35, 34, 31, 0.06); border-radius: 0.55cqw;
}
.tchip-icon { width: 1.75cqw; height: 1.75cqw; object-fit: contain; display: block; }
.tchip-lab { font-size: 0.6cqw; text-transform: uppercase; letter-spacing: 0.02em; font-weight: 800; color: rgba(35, 34, 31, 0.62); }
.tchip:hover { background: rgba(35, 34, 31, 0.11); }


.tchip.is-active { background: rgba(35, 34, 31, 0.2); }
.tchip.is-active .tchip-lab { color: rgba(35, 34, 31, 0.9); }
.tchip.is-hidden { opacity: 1; }
.tchip:focus-visible { outline: 2px solid #ffd24a; outline-offset: 1px; }

 
.tvalues { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 0.3cqw; }
.tvalues.is-occluded { opacity: 1; }
.tvalues::-webkit-scrollbar { width: 0.5cqw; }
.tvalues::-webkit-scrollbar-thumb { background: rgba(35, 34, 31, 0.22); border-radius: 1cqw; }
.tvrow {
  display: grid; grid-template-columns: 2.6cqw minmax(0, 1fr) auto; gap: 0.6cqw;
  align-items: center; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: transparent; padding: 0.3cqw 0.35cqw; border-radius: 0.5cqw;
}
.tvrow:hover { background: rgba(35, 34, 31, 0.07); }
.tvrow.is-selected { background: rgba(35, 34, 31, 0.14); }
.tvrow.is-selected .tvname { color: #000; }
.tvrow:focus-visible { outline: 2px solid #ffd24a; outline-offset: 1px; }
.tvsw {
  width: 2.5cqw; height: 2.5cqw; border-radius: 0.4cqw; overflow: hidden;
  background: rgba(35, 34, 31, 0.12); display: flex; align-items: center; justify-content: center;
}
.tvsw-img { width: 100%; height: 100%; object-fit: contain; }
.tvsw.is-none::after { content: "—"; color: rgba(35, 34, 31, 0.45); font-weight: 800; font-size: 1.1cqw; }
.tvname { font-size: 1.02cqw; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvmeta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.tvcount { font-size: 0.92cqw; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tvpct { font-size: 0.74cqw; color: rgba(35, 34, 31, 0.55); font-variant-numeric: tabular-nums; }

 
.tchip-icon { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }
.tchip:hover .tchip-icon { transform: scale(1.22) rotate(-5deg); }
.tchip:active .tchip-icon { transform: scale(1.05) rotate(0deg); }
@keyframes tchip-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28) rotate(6deg); } 100% { transform: scale(1); } }
.tchip.is-active .tchip-icon { animation: tchip-pop 0.32s ease; }
.tvsw-img { transition: transform 0.18s ease; }
.tvrow:hover .tvsw-img { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .tchip-icon, .tvsw-img { transition: none; }
  .tchip.is-active .tchip-icon { animation: none; }
}

 
 
.anim {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; z-index: 20; background: transparent; pointer-events: none;
  

  display: block; will-change: opacity;
}
.anim.is-playing { display: block; pointer-events: auto; cursor: pointer; }



.glass-hot {
  position: absolute; z-index: 8; left: 0.5%; top: 12%; width: 15%; height: 64%;
  background: transparent; border: 0; cursor: pointer; pointer-events: auto;
}
.door-hot {
  position: absolute; z-index: 8; left: 87.5%; top: 13%; width: 12%; height: 63%;
  background: transparent; border: 0; cursor: pointer; pointer-events: auto;
}
.glass-hot:focus-visible, .door-hot:focus-visible { outline: 3px solid #ffd24a; outline-offset: -4px; }

 
.room-toggle {
  position: absolute; z-index: 25; left: 1.2%; top: 1.2%;
  width: 3cqw; height: 3cqw; border-radius: 0.6cqw; border: 0; cursor: pointer;
  background: rgba(35,34,31,0.82); color: #f2efe8; font-size: 1.6cqw; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0.2cqw 0.6cqw rgba(0,0,0,0.3);
}
.room-toggle:hover { background: #23221f; }
.room-toggle[aria-pressed="true"] { background: #ffd24a; color: #23221f; }
.room-toggle:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }

 
.stage-root.revealed :is(.l-traits-panel, .l-actions-panel, .l-logo, .l-rarity,
  #pickers, .rare-toggle, .breakdown, .rarity-text, .act, .count, .unresolved-note) {
  opacity: 0; pointer-events: none;
}


.stage-root.revealed :is(.tchip, .tvrow) { pointer-events: none; }
.l-traits-panel, .l-actions-panel, .l-logo, .l-rarity,
#pickers, .rare-toggle, .rarity-text, .act, .count { transition: opacity 0.4s ease; }

 
@font-face {
  font-family: "Lilita One";
  src: url("/build/assets/buildv/lilita-one.woff2") format("woff2"), url("/build/assets/buildv/lilita-one.ttf") format("truetype");
  font-display: block;
}
.knock-pop {
  position: absolute; z-index: 22; left: 82%; top: 26%;
  

  font-family: "Lilita One", "Arial Black", sans-serif; font-weight: 400;
  font-size: 2.4cqw; color: #fff; letter-spacing: 0.04em; white-space: nowrap;
  --o: 0.2cqw;
  text-shadow:
    var(--o) 0 0 #000, calc(-1 * var(--o)) 0 0 #000, 0 var(--o) 0 #000, 0 calc(-1 * var(--o)) 0 #000,
    var(--o) var(--o) 0 #000, calc(-1 * var(--o)) var(--o) 0 #000,
    var(--o) calc(-1 * var(--o)) 0 #000, calc(-1 * var(--o)) calc(-1 * var(--o)) 0 #000,
    calc(0.7 * var(--o)) calc(1.4 * var(--o)) 0 #000, calc(1.4 * var(--o)) calc(0.7 * var(--o)) 0 #000,
    calc(-0.7 * var(--o)) calc(1.4 * var(--o)) 0 #000, calc(-1.4 * var(--o)) calc(0.7 * var(--o)) 0 #000,
    calc(0.7 * var(--o)) calc(-1.4 * var(--o)) 0 #000, calc(1.4 * var(--o)) calc(-0.7 * var(--o)) 0 #000,
    calc(-0.7 * var(--o)) calc(-1.4 * var(--o)) 0 #000, calc(-1.4 * var(--o)) calc(-0.7 * var(--o)) 0 #000,
    calc(2.4 * var(--o)) calc(2.4 * var(--o)) 0 #000;
  transform: rotate(-8deg) scale(0.6); opacity: 0; pointer-events: none;
  text-transform: uppercase;
}
.knock-pop.is-on { animation: knock-pop 0.9s ease; }
@keyframes knock-pop {
  0% { opacity: 0; transform: rotate(-8deg) scale(0.5); }
  20% { opacity: 1; transform: rotate(-8deg) scale(1.15); }
  65% { opacity: 1; transform: rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: rotate(-8deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .knock-pop.is-on { animation-duration: 0.01s; } }

 
.l-chart { left: 32.77%; top: 17.72%; width: 35.2%; height: 48.33%; z-index: 1; }




 
.l-menu           { left: 17.30%; top: 84.03%; width: 70.50%;  height: 19.83%;  }


.l-menu           { top: calc((100% - 100vh) / 2 + 94.24vh - 9.33%); }
 
.l-chart          { left: 35.81%; top: 22.44%; width: 30.51%;  height: 36.19%;  }
.l-contour        { left: 33.24%; top: 19.91%; width: 35.04%;  height: 44.50%;  }
#stage.con-canvas { left: 34.28%; top: 15.92%; width: 32.94%;  height: 47.48%;  }
.l-logo           { left: 33.05%; top: 1.32%;  width: 35.07%;  height: 18.72%;  }


.l-bg { left: calc((100% - 100vw) / 2); top: calc((100% - 100vh) / 2); width: 100vw; height: 100vh; }
.l-fg { left: calc((100% - 100vw) / 2 - 3.413vw); top: calc((100% - 100vh) / 2 - 3.016vh); width: 105.802vw; height: 108.560vh; }

 
.l-logo           { z-index: 31; }  
.l-fg             { z-index: 30; }  


.anim             { z-index: 2; }


.anim {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-1' y='-1' width='3' height='3'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Crect width='100' height='100' fill='white'/%3E%3Crect x='26' y='9' width='48' height='65' fill='black' filter='url(%23f)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-1' y='-1' width='3' height='3'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Crect width='100' height='100' fill='white'/%3E%3Crect x='26' y='9' width='48' height='65' fill='black' filter='url(%23f)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  mask-mode: luminance;
   
  opacity: 0; transition: opacity 0.35s ease;
}


@media (orientation: portrait) and (min-width: 1025px), (orientation: landscape) and (min-height: 501px) {
  #stage-root > :not(.anim):not(.l-bg) { will-change: transform; }
}
.anim.is-on      { display: block; }
.anim.is-playing { opacity: 1; }


#anim {
  -webkit-mask-image: url("/build/assets/buildv/anim/mask-glass.png");
  mask-image: url("/build/assets/buildv/anim/mask-glass.png");
  mask-mode: alpha;
}
#anim-door {
  -webkit-mask-image: url("/build/assets/buildv/anim/mask-door.png");
  mask-image: url("/build/assets/buildv/anim/mask-door.png");
  mask-mode: alpha;
}



.anim     { inset: auto; left: calc((100% - 100vw) / 2); top: calc((100% - 100vh) / 2); width: 100vw; height: 100vh; }
.glass-hot { left: calc((100% - 100vw) / 2 + 3.3vw); top: calc((100% - 100vh) / 2 + 8vh); width: 13.2vw; height: 59.2vh; }
.door-hot  { left: calc((100% - 100vw) / 2 + 87.7vw); top: calc((100% - 100vh) / 2 + 10.7vh); width: 9vw; height: 78.9vh; }


.knock-pop { left: calc((100% - 100vw) / 2 + 84vw); top: calc((100% - 100vh) / 2 + 48.5vh - var(--k, 0) * 9vh); }
.l-menu           { z-index: 13; will-change: transform; }  


.act, .copy-url   { will-change: transform; }
#stage.con-canvas { z-index: 9; }   
.l-contour        { z-index: 8; }
.l-chart          { z-index: 7; }
.l-bg             { z-index: 1; }



.tabs,
.rare-toggle, .breakdown, .l-traits-ui,
.l-actions-panel, .act, .l-rarity, .rarity-text,
.count, .unresolved-note { display: none; }



:root { color-scheme: only light; }



.l-traits-panel   { left: 13.43%; top: 9.99%;  width: 26.10%; height: 66.59%; }
#pickers.rows     { left: 15.14%; top: 16.73%; width: 23.10%; height: 55.80%; }
.l-chart          { left: 46.14%; }
.l-contour        { left: 43.57%; }
#stage.con-canvas { left: 44.61%; }
.l-logo           { left: 43.38%; }



.tvalues {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5cqw;
  align-content: start; padding: 0.1cqw 0.35cqw 0.3cqw 0.1cqw;
}
.tvrow {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.25cqw;
  padding: 0.4cqw; border-radius: 0.6cqw; background: rgba(35, 34, 31, 0.06);
}
.tvrow:hover { background: rgba(35, 34, 31, 0.11); }
.tvrow.is-selected { background: rgba(35, 34, 31, 0.2); }
.tvsw { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0.45cqw; }
.tvsw.is-none::after { font-size: 2cqw; }
.tvrow:hover .tvsw-img { transform: scale(1.06); }
.tvname { font-size: 0.95cqw; line-height: 1.15; }
.tvmeta { flex-direction: row; justify-content: space-between; align-items: baseline; }
.tvcount { font-size: 0.85cqw; }
.tvpct { font-size: 0.72cqw; }



.l-contour        { left: 47.74%; top: 19.91%; width: 26.70%; height: 44.50%; }
#stage.con-canvas { left: 48.31%; top: 20.86%; width: 25.56%; height: 42.49%; }



.act.btn-copy, .act.btn-download { display: block; top: 65.6%; width: 12.75%; height: 4.65%; z-index: 14; }
.act.btn-copy     { left: 47.74%; }
.act.btn-download { left: 61.69%; }



.l-traits-panel   { width: 29.80%; }
#pickers.rows     { left: 15.38%; width: 26.37%; }
.l-contour        { left: 53.24%; }
#stage.con-canvas { left: 53.81%; }
.l-logo           { left: 48.88%; }
.act.btn-copy     { left: 53.24%; }
.act.btn-download { left: 67.19%; }
.tvalues          { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42cqw; }
.tvrow            { padding: 0.32cqw; gap: 0.2cqw; }
.tvname           { font-size: 0.82cqw; }
.tvcount          { font-size: 0.74cqw; }
.tvpct            { font-size: 0.62cqw; }
.tvsw.is-none::after { font-size: 1.6cqw; }



.act .btn-art { left: 0; top: 0; }    
.act-say {
  position: absolute; left: 2%; right: 2%; top: 7%; bottom: 18%;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: rgb(202, 197, 190); border-radius: 0.3cqw;
  font-family: "Lilita One", "Arial Black", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 1.35cqw; letter-spacing: 0.04em; color: #fff; white-space: nowrap;
  --o: 0.12cqw;
  text-shadow:
    var(--o) 0 0 #000, calc(-1 * var(--o)) 0 0 #000, 0 var(--o) 0 #000, 0 calc(-1 * var(--o)) 0 #000,
    var(--o) var(--o) 0 #000, calc(-1 * var(--o)) var(--o) 0 #000,
    var(--o) calc(-1 * var(--o)) 0 #000, calc(-1 * var(--o)) calc(-1 * var(--o)) 0 #000;
}
.act-say[hidden] { display: none; }



.act.btn-roll { display: block; left: 53.24%; top: 71.45%; width: 12.75%; height: 4.65%; z-index: 14; }
.con-search {
  position: absolute; left: 67.19%; top: 71.45%; width: 12.75%; height: 4.65%; z-index: 14;
  display: flex; align-items: stretch; box-sizing: border-box; margin: 0;
  background: rgb(202, 197, 190); border: 0.2cqw solid #000; border-radius: 0.55cqw;
  box-shadow: inset 0 -0.45cqw 0 rgb(133, 133, 133); overflow: hidden;
}
.con-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 0 0 0.35cqw 0.7cqw; font: 400 1.25cqw/1 "Lilita One", "Arial Black", sans-serif;
  letter-spacing: 0.04em; color: #23221f; text-transform: uppercase;
}
.con-search input::placeholder { color: rgba(35, 34, 31, 0.45); }
.con-go {
  flex: 0 0 auto; border: 0; border-left: 0.2cqw solid #000; background: #23221f; cursor: pointer;
  padding: 0 0.8cqw 0.35cqw; font: 400 1.15cqw/1 "Lilita One", "Arial Black", sans-serif; color: #fff;
  letter-spacing: 0.04em;
}
.con-go:hover { background: #000; }
.con-search:focus-within { outline: 3px solid #ffd24a; outline-offset: 2px; }



.tabs { display: block; }
.tabs .tab { top: calc((100% - 100vh) / 2 + 94.24vh - 9.33% + 0.27%); height: 9.06%; }
.tab-0 { left: 20.53%; width: 9.94%; }
.tab-1 { left: 30.47%; width: 7.27%; }
.tab-2 { left: 37.74%; width: 10.11%; }
.tab-3 { left: 47.85%; width: 9.57%; }
.tab-4 { left: 57.42%; width: 7.85%; }
.tab-5 { left: 65.27%; width: 9.46%; }
.tab-6 { left: 74.73%; width: 9.79%; }
.tabs .tab { z-index: 14; }



.l-menu, .tabs.hotspots { display: none; }



@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  html { background: #3a3936; }
   
  body { overflow-x: hidden; overflow-y: auto; min-height: 100dvh; background: transparent; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                url("/build/assets/buildv/bg.webp") center 30% / cover no-repeat;
  }

  .stage-root {
    position: relative; top: auto; left: auto; transform: none;
    aspect-ratio: auto; width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box;
    padding: calc(14px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
             calc(18px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; row-gap: 10px;
    grid-template-areas:
      "logo   logo"
      "frame  frame"
      "copy   dl"
      "roll   search"
      "traits traits"
      "menu   menu";
    user-select: auto;
  }
   
  .stage-root > .layer, .stage-root > .act, .stage-root > .con-search,
  #stage.con-canvas, #pickers.rows, .tabs.hotspots {
    position: relative; inset: auto; left: auto; top: auto; width: auto; height: auto;
  }
  .l-bg, .l-fg, .l-menu, .l-traits-panel, .glass-hot, .door-hot, .knock-pop, .anim,
  .anim.is-on { display: none; }

  .stage-root > .l-logo { grid-area: logo; justify-self: center; width: min(78%, 420px); height: auto; margin-bottom: 4px; }

   
  .l-contour, #stage.con-canvas { grid-area: frame; justify-self: center; align-self: center; }
  .stage-root > .l-contour { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  #stage.con-canvas { width: 95.74%; height: auto; aspect-ratio: 1 / 1; }

   
  .act.btn-copy     { grid-area: copy; }
  .act.btn-download { grid-area: dl; }
  .act.btn-roll     { grid-area: roll; }
  .con-search       { grid-area: search; }
  .act.btn-copy, .act.btn-download, .act.btn-roll, .con-search {
    display: block; width: 100%; height: auto; aspect-ratio: 457 / 100; min-height: 40px;
  }
  .act .btn-art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .act-say { font-size: clamp(14px, 4.4vw, 22px); --o: 2px; border-radius: 4px; }
  .con-search { display: flex; border-width: 2px; border-radius: 7px; box-shadow: inset 0 -5px 0 rgb(133, 133, 133); }
   
  .stage-root > .con-search { width: 100%; min-width: 0; }
  .con-search input { font-size: 16px; padding: 0 0 4px 10px; width: 0; }
  .con-go { font-size: 16px; padding: 0 14px 4px; border-left-width: 2px; }

  

  #pickers.rows {
    grid-area: traits; margin-top: 8px; display: block;
    background: rgb(221, 219, 213); border-radius: 14px;
    border: 11px solid rgb(68, 77, 85);
    box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000, 0 10px 28px rgba(0, 0, 0, 0.35);
    padding: 0 10px 12px; overflow: hidden;
  }
  #pickers.rows::before {
    content: "TRAITS"; display: block; margin: 0 -10px 10px;
    background: rgb(37, 43, 46); border-bottom: 2px solid #000; color: #fff; text-align: center;
    font: 400 26px/1 "Lilita One", "Arial Black", sans-serif; letter-spacing: 0.02em; padding: 11px 0 9px;
  }
  .ttypes { gap: 8px; padding: 0 0 10px; }
  .tchip { min-height: 56px; padding: 7px 2px 6px; gap: 4px; border-radius: 9px; justify-content: center; }
  .tchip-icon { width: 24px; height: 24px; }
  .tchip-lab { font-size: 11px; }
  .tvalues {
    overflow: visible; max-height: none; padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  }
  .tvrow { padding: 6px; gap: 4px; border-radius: 10px; }
  .tvsw { border-radius: 7px; }
  .tvsw.is-none::after { font-size: 28px; }
  .tvname { font-size: 12.5px; }
  .tvcount { font-size: 12px; }
  .tvpct { font-size: 10.5px; }
  .tvrow:hover .tvsw-img { transform: none; }         

  

  .tabs.hotspots {
    grid-area: menu; margin: 14px -16px 0; pointer-events: auto;
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    height: 60px; padding-left: 31px;
    background: url("/build/assets/buildv/menu.webp") 16px 0 / 676px auto no-repeat local;
  }
  .tabs.hotspots::-webkit-scrollbar { display: none; }
  .tabs.hotspots::after { content: ""; flex: 0 0 47px; }
  .tabs .tab { position: relative; left: auto; top: auto; height: 54px; flex: 0 0 auto; }
  .tabs .tab-0 { width: 95px;  margin-left: 16px; }
  .tabs .tab-1 { width: 70px; }
  .tabs .tab-2 { width: 97px; }
  .tabs .tab-3 { width: 92px; }
  .tabs .tab-4 { width: 75px; }
  .tabs .tab-5 { width: 91px; }
  .tabs .tab-6 { width: 94px; }

  .toast {
    position: fixed; left: 50%; right: auto; top: auto; bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-50%); font-size: 14px; padding: 10px 16px; z-index: 50;
  }
}

 
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .stage-root {
    max-width: 980px; column-gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas:
      "logo   logo   traits traits"
      "frame  frame  traits traits"
      "copy   dl     traits traits"
      "roll   search traits traits"
      ".      .      traits traits"
      "menu   menu   menu   menu";
    align-items: start;
  }
  #pickers.rows { margin-top: 0; margin-left: 12px; }
  .tabs.hotspots { justify-self: center; width: 676px; margin: 18px 0 0; padding-left: 15px; background-position: 0 0; }
  .tabs .tab-0 { margin-left: 16px; }
}



@media (orientation: portrait) and (max-width: 699px) {
  :root {
    --lw: clamp(34px, 10.5vw, 52px);                                    
    --m: min(calc(100vw - 2 * var(--lw) - 14px), 38dvh);             
    --top: calc(env(safe-area-inset-top) + 8px);
    --logo-w: calc(var(--m) * 0.74);
    --logo-h: calc(var(--logo-w) * 208 / 652);
    --btn-w: calc((var(--m) - 8px) / 2);
    --btn-h: calc(var(--btn-w) * 100 / 457);
    --frame-top: calc(var(--top) + var(--logo-h) + 4px);
    --row1: calc(var(--frame-top) + var(--m) + 8px);
    --row2: calc(var(--row1) + var(--btn-h) + 7px);
    --menu-h: 54px;                      
    --room: calc(var(--row2) + var(--btn-h) + 12px + var(--menu-h) + 8px);
     
    --img-h: calc(var(--room) * 1116 / 968);
    --img-top: calc(var(--room) * -72 / 968);
    --wall-img-w: calc(var(--lw) * 1860 / 272);
    --back-img-w: calc((100vw - 2 * var(--lw)) * 1860 / 1186);
  }
  html { background: #292c2d; }
  body { overflow: hidden; height: 100dvh; min-height: 0; }
   
  body::before {
    inset: auto; top: var(--img-top); height: var(--img-h);
    left: calc(var(--lw) - (100vw - 2 * var(--lw)) * 372 / 1186); width: var(--back-img-w);
    background: url("/build/assets/buildv/bg.webp") 0 0 / 100% 100% no-repeat;
  }

  .stage-root {
    position: fixed; inset: 0; display: block; width: auto; height: 100dvh; max-width: none;
    margin: 0; padding: 0; overflow: hidden;
  }
   
  .stage-root::before, .stage-root::after {
    content: ""; position: absolute; top: 0; height: var(--room); width: var(--lw); z-index: 1;
    background-image: url("/build/assets/buildv/bg.webp"); background-repeat: no-repeat;
    background-size: var(--wall-img-w) var(--img-h);
    pointer-events: none;
  }
  .stage-root::before { left: 0; background-position: calc(var(--lw) * -100 / 272) var(--img-top); }
  .stage-root::after  { right: 0; background-position: calc(var(--lw) * -1558 / 272) var(--img-top); }

  .stage-root > .layer, .stage-root > .act, .stage-root > .con-search,
  #stage.con-canvas, #pickers.rows, .tabs.hotspots { position: absolute; }

  .stage-root > .l-logo {
    top: var(--top); left: calc(50% - var(--logo-w) / 2); width: var(--logo-w); height: var(--logo-h);
    margin: 0; z-index: 12;
  }
  .stage-root > .l-contour {
    top: var(--frame-top); left: calc(50% - var(--m) / 2); width: var(--m); height: var(--m); z-index: 8;
  }
  #stage.con-canvas {
    top: calc(var(--frame-top) + var(--m) * 0.0213); left: calc(50% - var(--m) * 0.4787);
    width: calc(var(--m) * 0.9574); height: calc(var(--m) * 0.9574); z-index: 9;
  }

  .act.btn-copy, .act.btn-download, .act.btn-roll, .con-search {
    width: var(--btn-w); height: var(--btn-h); min-height: 0; aspect-ratio: auto; z-index: 14;
  }
  .act.btn-copy     { top: var(--row1); left: calc(50% - var(--m) / 2); }
  .act.btn-download { top: var(--row1); left: calc(50% + 4px); }
  .act.btn-roll     { top: var(--row2); left: calc(50% - var(--m) / 2); }
  .stage-root > .con-search { top: var(--row2); left: calc(50% + 4px); width: var(--btn-w); }
  .act-say { font-size: clamp(13px, 4vw, 20px); }

   
  .tabs.hotspots {
    top: calc(var(--room) - var(--menu-h) - 8px); left: 0; right: 0; width: auto; height: var(--menu-h);
    margin: 0; z-index: 13;
  }

   
  #pickers.rows {
    top: calc(var(--room) - 4px); bottom: 0; left: 0; right: 0; width: auto; height: auto;
    margin: 0; z-index: 15; display: flex; flex-direction: column;
    border-radius: 16px 16px 0 0; border-width: 8px 8px 0; padding: 0 8px;
    box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000, 0 -8px 24px rgba(0, 0, 0, 0.45);
  }
  #pickers.rows::before { margin: 0 -8px 6px; font-size: 17px; padding: 5px 0 4px; flex: 0 0 auto; }
  .ttypes { flex: 0 0 auto; gap: 6px; padding: 0 0 8px; }
  .tchip { min-height: 0; padding: 5px 2px 4px; gap: 2px; }
  .tchip-icon { width: 20px; height: 20px; }
  .tchip-lab { font-size: 9.5px; }
  .tvalues {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; max-height: none;
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    padding: 0 0 calc(10px + env(safe-area-inset-bottom));
  }
  .tvrow { padding: 4px; gap: 3px; border-radius: 8px; }
  .tvname { font-size: 11px; }
  .tvcount { font-size: 10.5px; }
  .tvpct { font-size: 9px; }

   
  .glass-hot, .door-hot { display: block; top: 0; height: calc(var(--room) * 0.8); width: var(--lw); z-index: 11; }
  .glass-hot { left: 0; }
  .door-hot  { left: auto; right: 0; }
  .knock-pop {
    display: block; left: auto; right: calc(var(--lw) - 6px); font-size: 22px; --o: 2px; z-index: 22;
    top: calc(var(--room) * 0.42 - var(--k, 0) * var(--room) * 0.08);
  }
   
   
  .anim { display: block; z-index: 2; top: var(--img-top); height: var(--img-h); width: var(--wall-img-w); }
  .anim.is-on { display: block; }  
  #anim {
    left: calc(var(--lw) * -100 / 272);
    clip-path: inset(0 calc(var(--wall-img-w) - var(--lw) * 372 / 272) 0 calc(var(--lw) * 100 / 272));
  }
  #anim-door {
    left: calc(100vw - var(--lw) - var(--lw) * 1558 / 272);
    clip-path: inset(0 calc(var(--wall-img-w) - var(--lw) * 1830 / 272) 0 calc(var(--lw) * 1558 / 272));
  }
  .toast { bottom: auto; top: calc(var(--room) - var(--menu-h) - 52px); }
}
 
@media (orientation: portrait) and (max-width: 699px) and (max-height: 780px) {
  :root { --m: min(calc(100vw - 2 * var(--lw) - 14px), 35dvh); }
  #pickers.rows::before { display: none; }
  #pickers.rows { padding-top: 8px; }
}


@media (orientation: portrait) and (max-width: 699px) {
  :root {
    --m: min(66vw, 36dvh);
    --s: calc((100vw - var(--m) - 16px) / 674);        
    --lw: calc(var(--s) * 372);
    --rw: calc(var(--s) * 302);
    --floor-y: calc(var(--room) * 788 / 968);           
    --side-top: calc(var(--floor-y) - var(--s) * 860);   
  }
  body::before {
    left: calc(var(--lw) - (100vw - var(--lw) - var(--rw)) * 372 / 1186);
    width: calc((100vw - var(--lw) - var(--rw)) * 1860 / 1186);
  }
  .stage-root::before, .stage-root::after {
    background-color: rgb(41, 44, 45);
    background-size: calc(var(--s) * 1860) calc(var(--s) * 1116);
  }
  

  .stage-root::before, .stage-root::after {
    background-image: linear-gradient(rgb(41, 44, 45), rgb(41, 44, 45)), url("/build/assets/buildv/bg.webp");
    background-repeat: no-repeat;
  }
  .stage-root::before {
    width: var(--lw);
    background-size: 100% calc(var(--side-top) + var(--s) * 92), calc(var(--s) * 1860) calc(var(--s) * 1116);
    background-position: 0 0, 0 var(--side-top);
  }
  .stage-root::after {
    width: var(--rw);
    background-size: 100% calc(var(--side-top) + var(--s) * 92), calc(var(--s) * 1860) calc(var(--s) * 1116);
    background-position: 0 0, calc(var(--s) * -1558) var(--side-top);
  }
  .anim { top: var(--side-top); width: calc(var(--s) * 1860); height: calc(var(--s) * 1116); }
  #anim { left: 0; clip-path: inset(0 calc(var(--s) * 1488) 0 0); }
  #anim-door { left: calc(100vw - var(--s) * 1860); clip-path: inset(0 0 0 calc(var(--s) * 1558)); }
  .glass-hot { width: var(--lw); }
  .door-hot { width: var(--rw); }
   
  .knock-pop {
    right: 4px; font-size: 18px; --o: 1.6px;
    top: calc(var(--side-top) + var(--s) * (560 - var(--k, 0) * 150));
  }
}



@media (orientation: portrait) and (max-width: 699px) {
  :root:root {
    --s: calc(100vw * 0.34 / 390);                        
    --lw: 22vw; --rw: 22vw;
    --m: min(calc(100vw - 2 * var(--lw) - 14px), 38dvh);
    

    --rows-end: calc(var(--row2) + var(--btn-h));
    --room: max(calc((var(--rows-end) + 8px) * 968 / 788), calc(var(--rows-end) + 20px + var(--menu-h) + 8px));
  }
  

  .stage-root > .con-search { height: var(--btn-h); }
  .con-search input { height: 100%; line-height: 1; padding: 0 2px 2px 5px; box-sizing: border-box; }
  .con-search input::placeholder { font-size: 12px; }
  .con-go { font-size: 10px; padding: 0 5px 2px; letter-spacing: 0; line-height: 1; }
}


@media (orientation: portrait) and (max-width: 370px) {
  .con-search input { font-size: 14px; }
  .con-search input::placeholder { font-size: 10px; }    
}


@media (orientation: portrait) and (max-width: 699px) {
  .stage-root::before { background-position: 0 0, calc(var(--lw) - var(--s) * 372) var(--side-top); }
  .stage-root::after  { background-position: 0 0, calc(var(--s) * -1558) var(--side-top); }
  #anim {
    left: calc(var(--lw) - var(--s) * 372);
    clip-path: inset(0 calc(var(--s) * 1488) 0 calc(var(--s) * 372 - var(--lw)));
  }
  #anim-door {
    left: calc(100vw - var(--rw) - var(--s) * 1558);
    clip-path: inset(0 calc(var(--s) * 302 - var(--rw)) 0 calc(var(--s) * 1558));
  }
}


.search-say {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  padding: 0 6px 3px; box-sizing: border-box; cursor: pointer;
  background: rgb(202, 197, 190); color: #23221f; white-space: nowrap; overflow: hidden;
  font-family: "Lilita One", "Arial Black", sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: var(--say-size, 1.15cqw); letter-spacing: 0.03em; line-height: 1;
}
.search-say[hidden] { display: none; }
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .search-say { font-size: var(--say-size, 15px); }
}
@media (orientation: portrait) and (max-width: 699px) {
  .search-say { font-size: var(--say-size, 12px); }
}





.exit-sign {
  position: absolute; z-index: 14; pointer-events: auto; box-sizing: border-box;
  left: calc((100% - 100vw) / 2 + 88.71vw); top: calc((100% - 100vh) / 2 + 13.74vh);
  width: 4.41vw; height: 3.76vh;
  transform-origin: 0 0; transform: skewY(atan2(calc(-0.0596 * 1vh), calc(0.05376 * 1vw)));
  display: flex; align-items: center; justify-content: center;
  background: #1c1f21; border: 0.16vw solid #000; border-radius: 0.2vw;
  box-shadow: inset 0 calc(-0.3vh) 0 #0b0c0d, inset 0 0.08vw 0 #3e4549;
  color: #ff4a3d; text-decoration: none; padding: 0 0 0.25vh;
  font: 400 min(1.32vw, 2.9vh)/1 "Lilita One", "Arial Black", sans-serif; letter-spacing: 0.08em; text-indent: 0.08em;
  text-shadow: 0 0 0.3vw rgba(255, 74, 61, 0.85);
  transition: filter 0.15s ease;
}
.exit-sign:hover { filter: brightness(1.25); }
.exit-sign:active { filter: brightness(0.9); }
.exit-sign:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }

 
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .exit-sign {
    transform: none; letter-spacing: 0.1em; text-indent: 0.1em; padding-bottom: 0; background: linear-gradient(#2b2f31, #17191a);
    position: absolute; left: auto; right: calc(16px + env(safe-area-inset-right));
    top: calc(14px + env(safe-area-inset-top)); width: 84px; height: 38px;
    border-width: 2px; border-radius: 5px; box-shadow: inset 0 0 0 2px #4c5459, 0 3px 0 rgba(0, 0, 0, 0.35);
    font-size: 24px; padding-top: 2px; text-shadow: 0 0 6px rgba(255, 74, 61, 0.9), 0 0 14px rgba(255, 74, 61, 0.45);
  }
}



@media (orientation: portrait) and (max-width: 699px) {
  .exit-sign {
    transform: none; letter-spacing: 0.1em; text-indent: 0.1em; padding-bottom: 0; background: linear-gradient(#2b2f31, #17191a);
    left: auto; right: 6px; top: calc(var(--top) + 6px); width: calc(var(--rw) - 14px); max-width: 68px; height: 28px;
    border-width: 2px; border-radius: 4px; box-shadow: inset 0 0 0 2px #4c5459, 0 2px 0 rgba(0, 0, 0, 0.35);
    font-size: 17px; padding-top: 2px; text-shadow: 0 0 5px rgba(255, 74, 61, 0.9), 0 0 11px rgba(255, 74, 61, 0.45);
  }
  .tabs.hotspots { display: none; }
   
  .tvalues { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
}



@media (orientation: portrait) and (max-width: 699px) {
  #pickers.rows {
    top: calc(var(--rows-end) + (var(--room) - 4px - var(--rows-end)) * 0.35);
    padding-top: 0;
  }
  #pickers.rows::before { margin-bottom: 0; }
  .ttypes {
    margin: 0 -8px 8px; padding: 7px 8px 8px;
    background: rgb(203, 200, 193);
    border-bottom: 1px solid rgba(35, 34, 31, 0.3);
  }
  .tchip { background: rgba(255, 255, 255, 0.28); }
  .tchip:hover { background: rgba(255, 255, 255, 0.4); }
  .tchip.is-active { background: rgba(35, 34, 31, 0.18); }
}

.ttools { display: flex; align-items: center; gap: 0.4cqw; padding: 0 0.1cqw 0.55cqw; flex: 0 0 auto; pointer-events: auto; }
.tfind {
  flex: 1 1 auto; display: flex; align-items: center; gap: 0.35cqw; min-width: 0;
  background: rgba(255, 255, 255, 0.55); border: 0.12cqw solid rgba(35, 34, 31, 0.35);
  border-radius: 0.55cqw; padding: 0.25cqw 0.45cqw; cursor: text;
}
.tfind:focus-within { border-color: var(--ink); background: #fff; box-shadow: 0 0 0 0.18cqw rgba(255, 210, 74, 0.6); }
.tfind-glass { position: relative; width: 0.8cqw; height: 0.8cqw; flex: 0 0 auto; border: 0.14cqw solid var(--ink); border-radius: 50%; }
.tfind-glass::after {
  content: ""; position: absolute; width: 0.42cqw; height: 0.14cqw; background: var(--ink);
  right: -0.4cqw; bottom: -0.2cqw; transform: rotate(45deg); border-radius: 0.1cqw;
}
.tfind-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink);
  font: 800 0.86cqw/1.2 inherit; font-family: inherit; padding: 0.1cqw 0;
}
.tfind-input::placeholder { color: rgba(35, 34, 31, 0.5); font-weight: 700; }
.tfind-input::-webkit-search-cancel-button { cursor: pointer; }
.tsize { display: flex; gap: 0.15cqw; flex: 0 0 auto; }
.tsize-btn {
  border: 0; cursor: pointer; font-family: inherit; font-weight: 800; color: rgba(35, 34, 31, 0.62);
  background: rgba(35, 34, 31, 0.06); border-radius: 0.4cqw; text-transform: uppercase; letter-spacing: 0.02em;
}
.tsize-btn { font-size: 0.62cqw; width: 1.35cqw; height: 1.55cqw; }
.tsize-btn:hover { background: rgba(35, 34, 31, 0.11); }
.tsize-btn[aria-pressed="true"] { background: rgba(35, 34, 31, 0.2); color: rgba(35, 34, 31, 0.95); }
.tsize-btn:focus-visible { outline: 2px solid #ffd24a; outline-offset: 1px; }

.tchip { position: relative; }
#pickers.is-searching .tchip[data-hits]:not([data-hits=""]):not([data-hits="0"])::after {
  content: attr(data-hits); position: absolute; top: 0.15cqw; right: 0.2cqw;
  min-width: 0.9cqw; padding: 0 0.15cqw; border-radius: 0.5cqw; background: var(--ink); color: #fff;
  font-size: 0.55cqw; font-weight: 800; line-height: 0.9cqw; text-align: center;
}
#pickers.is-searching .tchip.is-miss { opacity: 0.35; }
.tvrow.is-dim { opacity: 1; }
.tvrow.is-new .tvcount { color: #b0261c; letter-spacing: 0.02em; white-space: nowrap; }
.tvempty { grid-column: 1 / -1; margin: 1cqw 0; text-align: center; font-weight: 800; font-size: 0.85cqw; color: rgba(35, 34, 31, 0.55); }

#pickers[data-size="s"] .tvalues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#pickers[data-size="l"] .tvalues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#pickers[data-size="s"] .tvmeta { display: none; }
#pickers[data-size="s"] .tvname { font-size: 0.7cqw; }

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .ttools { gap: 6px; padding: 0 0 8px; }
  .tfind { gap: 6px; padding: 7px 10px; border-width: 1.5px; border-radius: 9px; }
  .tfind-glass { width: 12px; height: 12px; border-width: 2px; }
  .tfind-glass::after { width: 6px; height: 2px; right: -6px; bottom: -3px; }
  .tfind-input { font-size: 16px; }
  .tsize { gap: 3px; }
  .tsize-btn { font-size: 11px; width: 26px; height: 32px; border-radius: 7px; }
  #pickers.is-searching .tchip[data-hits]:not([data-hits=""]):not([data-hits="0"])::after {
    top: 2px; right: 3px; min-width: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; line-height: 16px;
  }
  .tvempty { font-size: 13px; margin: 14px 0; }
  #pickers[data-size="s"] .tvname { font-size: 10px; }
}
@media (orientation: portrait) and (max-width: 699px) {
  #pickers[data-size="s"] .tvalues { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #pickers[data-size="l"] .tvalues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tvsw { position: relative; }
.tvlock {
  position: absolute; top: 0.25cqw; left: 0.25cqw; width: 1.25cqw; height: 1.25cqw; z-index: 2;
  display: grid; place-items: center; box-sizing: border-box;
  background: rgb(221, 219, 213); border-radius: 0.35cqw; color: rgba(35, 34, 31, 0.62);
  cursor: pointer; opacity: 0; transition: opacity 0.12s ease;
}
.tvlock::after { content: ""; position: absolute; inset: -0.35cqw; }
.tvlock svg { width: 66%; height: 66%; display: block; overflow: visible; }
.tvlock .tl-shackle { transform: translateY(-1.3px); transition: transform 0.14s ease; }
.tvrow:focus-within .tvlock, .tvrow.is-selected .tvlock { opacity: 1; }


@media (hover: hover) and (pointer: fine) {
  .tvrow:hover .tvlock { opacity: 1; }
}
.tvlock:hover { color: rgb(38, 36, 33); }
.tvrow.is-locked .tvlock { opacity: 1; background: rgb(38, 36, 33); color: rgb(221, 219, 213); }
.tvrow.is-locked .tvlock .tl-shackle { transform: none; }
.tvrow.is-locked { box-shadow: inset 0 0 0 0.12cqw var(--ink); }
.tvlock:focus-visible { outline: 2px solid #ffd24a; outline-offset: 1px; opacity: 1; }

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .tvrow.is-locked { box-shadow: inset 0 0 0 2px var(--ink); }
  .tvlock { top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 6px; }
  .tvlock::after { inset: -9px; }
}

body > .toast {
  position: fixed; left: 50%; right: auto; top: auto; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 60; pointer-events: none;
  font-size: 14px; padding: 9px 14px; border-radius: 8px;
}
body > .toast.is-at { bottom: auto; transform: translate(-50%, calc(-100% - 8px)); }
body > .toast.has-act { pointer-events: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.toast-act {
  pointer-events: auto; border: 0; border-radius: 6px; padding: 5px 10px; cursor: pointer;
  background: #ffd24a; color: #23221f; font: 800 13px/1 system-ui, sans-serif; letter-spacing: 0.02em;
}
.toast-act:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tvx {
  position: absolute; top: 0.25cqw; right: 0.25cqw; width: 1.25cqw; height: 1.25cqw; z-index: 2;
  display: none; place-items: center; box-sizing: border-box; cursor: pointer;
  background: rgb(38, 36, 33); color: rgb(221, 219, 213); border-radius: 0.35cqw;
  font: 700 1.1cqw/1 system-ui, sans-serif;
}
.tvx::after { content: ""; position: absolute; inset: -0.35cqw; }
.tvrow.is-selected .tvx { display: grid; }
.tvx:hover { background: #b0261c; color: #fff; }
.tvx:focus-visible { outline: 2px solid #ffd24a; outline-offset: 1px; }
@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .tvx { top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 6px; font-size: 17px; }
  .tvx::after { inset: -9px; }
  body > .toast.has-act { font-size: 13px; white-space: normal; max-width: calc(100vw - 24px); }
}
body > .toast.is-at::after {
  content: ""; position: absolute; left: var(--tip, 50%); bottom: -6px; width: 12px; height: 12px;
  margin-left: -6px; background: inherit; transform: rotate(45deg); border-radius: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  body > .toast:not([hidden]) { animation: toast-in 0.16s ease-out; }
}
@keyframes toast-in { from { opacity: 0; margin-top: 6px; } to { opacity: 1; margin-top: 0; } }

@media (orientation: landscape) and (max-height: 500px) {
  body { overflow: hidden; }
  .stage-root {
    max-width: none; height: 100dvh; box-sizing: border-box; row-gap: 6px; column-gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "logo   logo   traits traits"
      "frame  frame  traits traits"
      "copy   dl     traits traits"
      "roll   search traits traits"
      ".      .      traits traits";
    --lm: min(100%, calc(100dvh - 16px - 34px - 2 * 42px - 4 * 6px));
  }
  .stage-root > .l-logo { width: auto; height: 34px; margin: 0; }
  .stage-root > .l-contour { width: var(--lm); }
  #stage.con-canvas { width: calc(var(--lm) * 0.9574); }
  .act.btn-copy, .act.btn-download, .act.btn-roll, .con-search { min-height: 0; height: 42px; aspect-ratio: auto; }
  .act-say { font-size: 15px; }
  #pickers.rows {
    margin: 0 0 0 6px; height: calc(100dvh - 16px); box-sizing: border-box;
    display: flex; flex-direction: column; border-width: 8px;
  }
  #pickers.rows::before { font-size: 20px; padding: 7px 0 6px; margin-bottom: 8px; }
  .ttypes { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding-bottom: 6px; }
  .tchip { min-height: 0; padding: 5px 1px 4px; }
  .tchip-icon { width: 20px; height: 20px; }
  .tchip-lab { font-size: 8.5px; }
  .tvalues { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #pickers[data-size="s"] .tvalues { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #pickers[data-size="l"] .tvalues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabs.hotspots { display: none; }
  .exit-sign {
    position: fixed; left: auto; right: max(12px, env(safe-area-inset-right)); top: 8px; width: 64px; height: 28px;
    border-width: 2px; border-radius: 5px; font-size: 18px; padding-top: 2px; z-index: 40;
    text-shadow: 0 0 6px rgba(255, 74, 61, 0.9);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .exit-sign { right: auto; left: max(12px, env(safe-area-inset-left)); }
  .tchip-lab { font-size: 7.5px; letter-spacing: 0; }
}

.copy-url {
  position: absolute; left: 53.24%; top: 77.25%; width: 26.70%; height: 4.65%; z-index: 14;
  box-sizing: border-box; margin: 0; padding: 0 0 0.35cqw; cursor: pointer; pointer-events: auto;
  background: rgb(202, 197, 190); border: 0.2cqw solid #000; border-radius: 0.55cqw;
  box-shadow: inset 0 -0.45cqw 0 rgb(133, 133, 133);
  font: 400 1.35cqw/1 "Lilita One", "Arial Black", sans-serif; letter-spacing: 0.04em; color: #fff;
  --o: 0.12cqw;
  text-shadow:
    var(--o) 0 0 #000, calc(-1 * var(--o)) 0 0 #000, 0 var(--o) 0 #000, 0 calc(-1 * var(--o)) 0 #000,
    var(--o) var(--o) 0 #000, calc(-1 * var(--o)) var(--o) 0 #000,
    var(--o) calc(-1 * var(--o)) 0 #000, calc(-1 * var(--o)) calc(-1 * var(--o)) 0 #000;
}
.copy-url:hover { filter: brightness(1.06); }
.copy-url:active { transform: translateY(1px); }
.copy-url:focus-visible { outline: 3px solid #ffd24a; outline-offset: 2px; }
.url-say {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-bottom: inherit; background: rgb(202, 197, 190); border-radius: inherit; pointer-events: none;
}
.url-say[hidden] { display: none; }
.url-ico { display: none; }



@media (orientation: portrait) and (min-width: 1025px), (orientation: landscape) and (min-height: 501px) {
  .act.btn-copy, .act.btn-download, .act.btn-roll, .copy-url {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.35cqw;
    box-sizing: border-box; padding: 0 0.3cqw 0.35cqw; cursor: pointer;
    border: 0.2cqw solid rgb(32, 36, 38); border-radius: 0.5cqw; background: rgb(124, 136, 144);
    box-shadow: inset 0 0.15cqw 0 rgba(255, 255, 255, 0.28), inset 0 -0.35cqw 0 rgb(84, 94, 101);
    font: 400 0.92cqw/1 "Lilita One", "Arial Black", sans-serif; letter-spacing: 0.03em;
    color: rgb(32, 36, 38); text-shadow: none; white-space: nowrap;
  }
  .act.btn-copy .btn-art, .act.btn-download .btn-art, .act.btn-roll .btn-art { display: none; }
  .act.btn-copy::after { content: "COPY IMAGE"; }
  .act.btn-download::after { content: "DOWNLOAD PNG"; }
  .act.btn-roll::after { content: "RANDOM ROLL"; }
  .copy-url:hover { filter: brightness(1.08); }
  .url-ico {
    display: block; width: 1.15cqw; height: 1.15cqw;
    fill: none; stroke: rgb(32, 36, 38); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  }
  .url-word { display: block; white-space: nowrap; }
  .url-say, .act-say { background: rgb(124, 136, 144); color: rgb(32, 36, 38); text-shadow: none; }

  .act.btn-copy, .act.btn-download, .copy-url { top: 65.6%; width: 8.3%; height: 4.65%; }
  .act.btn-copy { left: 53.24%; }
  .act.btn-download { left: 62.44%; }
  .copy-url { left: 71.64%; }
  .act.btn-roll { left: 53.24%; top: 71.45%; width: 8.3%; height: 4.65%; }
  .con-search {
    left: 62.44%; top: 71.45%; width: 17.5%; height: 4.65%;
    border-color: rgb(32, 36, 38); border-radius: 0.5cqw; background: rgb(124, 136, 144);
    box-shadow: inset 0 0.15cqw 0 rgba(255, 255, 255, 0.28), inset 0 -0.35cqw 0 rgb(84, 94, 101);
  }
  .con-search input { color: rgb(32, 36, 38); padding-left: 1cqw; }
  .con-search input::placeholder { color: rgba(32, 36, 38, 0.55); }
  .con-go { background: rgb(32, 36, 38); border-left-color: rgb(32, 36, 38); }
}

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .stage-root {
    grid-template-areas:
      "logo   logo"
      "frame  frame"
      "copy   dl"
      "roll   search"
      "link   link"
      "traits traits"
      "menu   menu";
  }
  .stage-root > .copy-url {
    position: relative; grid-area: link; left: auto; top: auto; width: 100%; height: auto;
    aspect-ratio: 924 / 100; min-height: 40px; border-width: 2px; border-radius: 7px;
    box-shadow: inset 0 -5px 0 rgb(133, 133, 133); padding-bottom: 4px;
    font-size: clamp(14px, 4.4vw, 22px); --o: 2px;
  }
}
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) {
  .stage-root {
    grid-template-rows: auto auto auto auto auto 1fr auto;
    grid-template-areas:
      "logo   logo   traits traits"
      "frame  frame  traits traits"
      "copy   dl     traits traits"
      "roll   search traits traits"
      "link   link   traits traits"
      ".      .      traits traits"
      "menu   menu   menu   menu";
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .stage-root {
    grid-template-rows: auto auto auto auto auto 1fr;
    grid-template-areas:
      "logo   logo   traits traits"
      "frame  frame  traits traits"
      "copy   dl     traits traits"
      "roll   search traits traits"
      "link   link   traits traits"
      ".      .      traits traits";
    --lm: min(100%, calc(100dvh - 16px - 34px - 3 * 42px - 5 * 6px));
  }
  .stage-root > .copy-url { aspect-ratio: auto; height: 42px; min-height: 0; font-size: 15px; }
}
@media (orientation: portrait) and (max-width: 699px) {
  :root:root:root {
    --row3: calc(var(--row2) + var(--btn-h) + 7px);
    --rows-end: calc(var(--row3) + var(--btn-h));
  }
  .stage-root > .copy-url {
    position: absolute; top: var(--row3); left: calc(50% - var(--m) / 2); width: var(--m); height: var(--btn-h);
    min-height: 0; aspect-ratio: auto; font-size: clamp(13px, 4vw, 20px);
  }
}
@media (orientation: portrait) and (max-width: 699px) {
  .stage-root > .copy-url { font-size: clamp(11px, 3.6vw, 17px); line-height: 1; padding-bottom: 3px; }
}

.tlocked {
  display: flex; align-items: center; gap: 0.3cqw; flex: 0 0 auto; pointer-events: auto;
  padding: 0 0.1cqw 0.5cqw; overflow-x: auto; scrollbar-width: none;
}
.tlocked::-webkit-scrollbar { display: none; }
.tlocked[hidden] { display: none; }
.tlocked-head {
  flex: 0 0 auto; font-size: 0.6cqw; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  color: rgba(35, 34, 31, 0.62);
}
.tlocked-chip {
  flex: 0 0 auto; display: flex; align-items: center; border-radius: 0.4cqw;
  background: rgb(38, 36, 33); color: rgb(221, 219, 213); overflow: hidden;
}
.tlocked-open, .tlocked-x {
  border: 0; background: transparent; color: inherit; cursor: pointer; font-family: inherit; font-weight: 800;
}
.tlocked-open { display: flex; align-items: center; gap: 0.25cqw; padding: 0.15cqw 0.2cqw 0.15cqw 0.15cqw; font-size: 0.62cqw; }
.tlocked-open img { width: 1.1cqw; height: 1.1cqw; object-fit: contain; border-radius: 0.2cqw; background: rgba(221, 219, 213, 0.9); }
.tlocked-open span { max-width: 5cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlocked-x { font-size: 0.8cqw; line-height: 1; padding: 0 0.3cqw 0.05cqw; opacity: 0.75; }
.tlocked-x:hover { opacity: 1; }
.tlocked-open:hover span { text-decoration: underline; }
.tlocked-open:focus-visible, .tlocked-x:focus-visible { outline: 2px solid #ffd24a; outline-offset: -2px; }

@media (orientation: portrait) and (max-width: 1024px), (orientation: landscape) and (max-height: 500px) {
  .tlocked { gap: 6px; padding: 0 0 8px; }
  .tlocked-head { font-size: 10.5px; }
  .tlocked-chip { border-radius: 7px; }
  .tlocked-open { gap: 5px; padding: 3px 4px 3px 3px; font-size: 11.5px; }
  .tlocked-open img { width: 22px; height: 22px; border-radius: 4px; }
  .tlocked-open span { max-width: 96px; }
  .tlocked-x { font-size: 17px; padding: 0 8px 1px 4px; min-height: 28px; }
}



@media (orientation: portrait) and (max-width: 699px) {
  :root:root:root {
    --pb-h: 38px;
    --pb-gap: 6px;
    --pb-w: calc((100vw - 24px - 2 * var(--pb-gap)) / 3);
    --row1: calc(var(--frame-top) + var(--m) + 8px);
    --row2: calc(var(--row1) + var(--pb-h) + var(--pb-gap));
    --rows-end: calc(var(--row2) + var(--pb-h));
    --room: calc(var(--rows-end) + 14px);
  }
  html body .act.btn-copy, html body .act.btn-download, html body .act.btn-roll, html body .stage-root > .copy-url {
    position: absolute; display: flex; align-items: center; justify-content: center; gap: 6px;
    width: var(--pb-w); height: var(--pb-h); min-height: 0; aspect-ratio: auto; box-sizing: border-box;
    padding: 0 4px 3px; margin: 0; cursor: pointer; z-index: 14;
    border: 2px solid rgb(32, 36, 38); border-radius: 7px; background: rgb(124, 136, 144);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -4px 0 rgb(84, 94, 101);
    font: 400 clamp(11px, 3.3vw, 14px)/1 "Lilita One", "Arial Black", sans-serif; letter-spacing: 0.02em;
    color: rgb(32, 36, 38); text-shadow: none; white-space: nowrap;
  }
  html body .act.btn-copy .btn-art, html body .act.btn-download .btn-art, html body .act.btn-roll .btn-art { display: none; }
  html body .act.btn-copy::after { content: "COPY IMAGE"; }
  html body .act.btn-download::after { content: "DOWNLOAD PNG"; }
  html body .act.btn-roll::after { content: "RANDOM ROLL"; }
  html body .act.btn-copy { top: var(--row1); left: 12px; }
  html body .act.btn-download { top: var(--row1); left: calc(12px + var(--pb-w) + var(--pb-gap)); }
  html body .stage-root > .copy-url { top: var(--row1); left: calc(12px + 2 * (var(--pb-w) + var(--pb-gap))); }
  html body .act.btn-roll { top: var(--row2); left: 12px; }
  html body .stage-root > .con-search {
    top: var(--row2); left: calc(12px + var(--pb-w) + var(--pb-gap));
    width: calc(2 * var(--pb-w) + var(--pb-gap)); height: var(--pb-h);
    border: 2px solid rgb(32, 36, 38); border-radius: 7px; background: rgb(124, 136, 144);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -4px 0 rgb(84, 94, 101);
  }
  html body .con-search input { color: rgb(32, 36, 38); font-size: 16px; padding: 0 0 3px 12px; }
  html body .con-search input::placeholder { color: rgba(32, 36, 38, 0.55); }
  html body .con-go { background: rgb(32, 36, 38); border-left-color: rgb(32, 36, 38); font-size: 14px; padding: 0 14px 3px; }
  html body .url-ico {
    display: block; width: 15px; height: 15px; flex: 0 0 auto;
    fill: none; stroke: rgb(32, 36, 38); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  }
  html body .url-word { display: block; white-space: nowrap; }
  html body .url-say, html body .act-say { background: rgb(124, 136, 144); color: rgb(32, 36, 38); text-shadow: none; font-size: 13px; }

  

  html body .ttypes {
    display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; padding: 0 34px 8px;
    scrollbar-width: none; touch-action: pan-y;
  }
  html body .ttypes::-webkit-scrollbar { display: none; }
  html body .tchip {
    flex: 0 0 calc((100% - 18px) / 4); min-width: 0; min-height: 52px; padding: 6px 2px 5px; gap: 3px;
    transform: translate3d(calc(-1 * var(--shift, 0px)), 0, 0);
    transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.24, 1);
    will-change: transform;
  }
  html body .ttypes.is-dragging .tchip { transition: none; }
  @media (prefers-reduced-motion: reduce) { html body .tchip { transition-duration: 0.01s; } }
  html body .tchip-icon { width: 22px; height: 22px; }
  html body .tchip-lab { font-size: clamp(8.5px, 2.6vw, 11px); letter-spacing: 0; white-space: nowrap; }

  html body #pickers .tvalues { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html body #pickers[data-size="s"] .tvalues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html body #pickers[data-size="l"] .tvalues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .tvname { font-size: 13px; }
  html body .tvcount { font-size: 12px; }
  html body .tvpct { font-size: 10.5px; }
}



html {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.btn-plate { display: none; }



@media (orientation: portrait) and (max-width: 699px) {
  :root:root:root:root {
    --lw: 15vw; --rw: 15vw;
    --m: min(calc(56vw - 14px), 38dvh);
    --plate-pad: 10px;
    --pb-gap: 5px;
    --pb-w: calc((100vw - var(--lw) - var(--rw) - 8px - 2 * var(--plate-pad) - 2 * var(--pb-gap)) / 3);
    --pb-x: calc(var(--lw) + 4px + var(--plate-pad));
    --row1: calc(var(--frame-top) + var(--m) + 8px + var(--plate-pad));
    --rows-end: calc(var(--row2) + var(--pb-h));
    --room: calc(var(--rows-end) + var(--plate-pad) + 12px);
  }
  html body .btn-plate {
    display: block; position: absolute; z-index: 13; pointer-events: none; box-sizing: border-box;
    left: calc(var(--lw) + 4px); width: calc(100vw - var(--lw) - var(--rw) - 8px);
    top: calc(var(--row1) - var(--plate-pad)); height: calc(2 * var(--pb-h) + var(--pb-gap) + 2 * var(--plate-pad));
    border: 2px solid rgb(32, 36, 38); border-radius: 9px;
    background:
      radial-gradient(circle at 5px 5px, rgb(42, 47, 50) 2px, rgb(170, 180, 186) 2.6px, transparent 3.4px),
      radial-gradient(circle at calc(100% - 5px) 5px, rgb(42, 47, 50) 2px, rgb(170, 180, 186) 2.6px, transparent 3.4px),
      radial-gradient(circle at 5px calc(100% - 5px), rgb(42, 47, 50) 2px, rgb(170, 180, 186) 2.6px, transparent 3.4px),
      radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgb(42, 47, 50) 2px, rgb(170, 180, 186) 2.6px, transparent 3.4px),
      rgb(84, 94, 101);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgb(58, 65, 70), 0 3px 0 rgba(0, 0, 0, 0.35);
  }
  html body .act.btn-copy, html body .act.btn-download, html body .act.btn-roll, html body .stage-root > .copy-url {
    font-size: clamp(10px, 2.9vw, 13px); gap: 4px; padding: 0 3px 3px;
    white-space: normal; line-height: 1.02; text-align: center;
  }
  html body .act.btn-copy::after { content: "COPY\A IMAGE"; white-space: pre; }
  html body .act.btn-download::after { content: "DOWNLOAD\A PNG"; white-space: pre; }
  html body .act.btn-roll::after { content: "RANDOM\A ROLL"; white-space: pre; }
  html body .url-word { white-space: normal; width: min-content; text-align: left; }
  html body .url-ico { width: 13px; height: 13px; }
  html body .act.btn-copy { left: var(--pb-x); }
  html body .act.btn-download { left: calc(var(--pb-x) + var(--pb-w) + var(--pb-gap)); }
  html body .stage-root > .copy-url { left: calc(var(--pb-x) + 2 * (var(--pb-w) + var(--pb-gap))); }
  html body .act.btn-roll { left: var(--pb-x); }
  html body .stage-root > .con-search { left: calc(var(--pb-x) + var(--pb-w) + var(--pb-gap)); }
  html body .con-go { padding: 0 10px 3px; }

  html body #pickers.rows {
    pointer-events: auto;
    box-shadow: inset 2px 0 0 #000, inset -2px 0 0 #000, inset 0 2px 0 #000,
      -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 -8px 24px rgba(0, 0, 0, 0.45);
  }

  html body .exit-sign {
    position: absolute; left: auto; right: 5px; top: calc(var(--top) + 30px);
    width: calc(var(--rw) - 10px); max-width: none; height: 20px; z-index: 14;
    transform-origin: 0 100%; transform: skewY(-33.6deg);
    display: flex; align-items: center; justify-content: center; padding: 0 0 2px;
    background: #1c1f21; border: 2px solid #000; border-radius: 3px;
    box-shadow: inset 0 -3px 0 #0b0c0d, inset 0 1px 0 #3e4549;
    font-size: 12px; letter-spacing: 0.06em; text-indent: 0.06em;
    text-shadow: 0 0 4px rgba(255, 74, 61, 0.85);
  }
}



.ttypes-wrap { position: relative; flex: 0 0 auto; }
.tscroll { display: none; }
@media (orientation: portrait) and (max-width: 699px) {
  html body .tscroll {
    position: absolute; z-index: 3; top: 0; bottom: 8px; width: 34px; margin: 0; padding: 0;
    display: grid; place-items: center; border: 0; cursor: pointer;
    background: rgb(203, 200, 193); color: rgb(35, 34, 31);
    font: 700 28px/1 system-ui, sans-serif;
  }
  html body .tscroll[hidden] { display: none; }
  html body .tscroll--l { left: -8px; box-shadow: 6px 0 8px -4px rgba(0, 0, 0, 0.35); padding-bottom: 3px; }
  html body .tscroll--r { right: -8px; box-shadow: -6px 0 8px -4px rgba(0, 0, 0, 0.35); padding-bottom: 3px; }
  html body .tscroll::before {
    content: ""; position: absolute; inset: 50% auto auto 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 50%; background: rgb(35, 34, 31); z-index: -1;
  }
  html body .tscroll { color: rgb(232, 226, 212); }
}