/* JX69 V35.21DB — Character Create Art-Bound Geometry Rootfix
   Single design space: 1672 x 941. All interactive controls stay registered
   to the baked artwork at every viewport size. */
#JX69CreateDA{position:fixed;inset:0;z-index:10020;display:none;background:#02080b;font-family:Nunito,Tahoma,sans-serif;overflow:hidden;isolation:isolate}
#JX69CreateDA.on{display:block}
#JX69CreateDA::before{content:"";position:absolute;inset:-24px;background:url('./create-character-db/background.png') center/cover no-repeat;filter:blur(18px) brightness(.26) saturate(.72);transform:scale(1.045);opacity:.88;pointer-events:none}
.cc-stage{position:absolute;z-index:1;left:50%;top:50%;width:min(100vw,177.6833156vh);width:min(100dvw,177.6833156dvh);aspect-ratio:1672/941;transform:translate(-50%,-50%);background:url('./create-character-db/background.png') center/100% 100% no-repeat;overflow:hidden;box-shadow:0 0 80px #000;contain:layout paint}

/* Left faction cards — exact artwork grid. */
.cc-factions{position:absolute;z-index:4;left:12.35%;top:24.55%;width:14.55%;height:56.7%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,1fr);gap:1.25% 3.8%}
.cc-faction{position:relative;border:1px solid transparent;border-radius:8%;background:transparent;cursor:pointer;outline:none;min-width:0;min-height:0;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cc-faction:hover,.cc-faction:focus-visible{border-color:#ddbc6d;background:rgba(17,38,34,.16);box-shadow:inset 0 0 15px rgba(224,186,99,.16)}
.cc-faction.on{border-color:#ffd576;background:rgba(31,78,61,.13);box-shadow:0 0 0 1px rgba(255,205,92,.36),inset 0 0 20px rgba(255,207,90,.18)}
.cc-faction span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Character remains centered on the lotus. */
.cc-portrait-wrap{position:absolute;z-index:2;left:38.5%;bottom:18.7%;width:30%;height:62%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.cc-portrait{height:100%;max-width:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 14px 12px rgba(0,0,0,.72)) drop-shadow(0 0 14px rgba(177,219,210,.18))}
.cc-portrait-hint{margin:auto 0 20%;padding:9px 16px;border:1px solid rgba(213,176,92,.55);background:rgba(3,15,16,.78);color:#d7c38f;border-radius:6px;font-size:clamp(10px,.85vw,15px)}

/* Lore is a real overlay; it is not a baked control and may adapt text size. */
.cc-lore{position:absolute;z-index:4;right:3.5%;top:22%;width:22%;max-height:42%;overflow:auto;padding:clamp(8px,.8vw,14px) clamp(9px,.9vw,16px);border:1px solid #8e713e;border-radius:8px;background:linear-gradient(180deg,rgba(9,28,27,.92),rgba(4,13,14,.86));box-shadow:inset 0 0 0 1px rgba(217,178,92,.18),0 15px 35px rgba(0,0,0,.4);color:#e9dfc0;scrollbar-width:thin}
.cc-lore h2{margin:0;color:#f4d282;font:800 clamp(13px,1.35vw,25px) Georgia,serif}
.cc-lore b{display:block;margin-top:3px;color:#93c9b6;font-size:clamp(8px,.74vw,13px)}
.cc-lore p{margin:8px 0 0;line-height:1.5;font-size:clamp(8px,.78vw,14px);color:#d6d0bd}

/* ART-BOUND REAL CONTROLS.
   Real DOM hitboxes are transparent and sit directly on the baked controls.
   No second visible button is painted on top of the artwork. */
.cc-genders{position:absolute;z-index:7;left:43.30%;top:75.55%;width:14.20%;height:5.00%;display:grid;grid-template-columns:1fr 1fr;gap:3.7%}
.cc-genders button{min-width:0;min-height:0;padding:0;border:1px solid transparent;border-radius:999px;background:transparent;color:transparent;font-size:0;cursor:pointer;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cc-genders button:hover,.cc-genders button:focus-visible{border-color:rgba(255,220,133,.82);box-shadow:0 0 8px rgba(255,205,92,.30),inset 0 0 8px rgba(255,255,255,.10)}
.cc-genders button.on{border-color:#f3cb6d;box-shadow:0 0 10px rgba(255,197,80,.48),inset 0 0 0 1px rgba(255,236,176,.30)}
.cc-genders button:disabled{cursor:not-allowed;background:rgba(1,7,8,.42);box-shadow:inset 0 0 12px rgba(0,0,0,.46);opacity:.72}

/* Name field aligns to the dark baked input only; dice hitbox aligns to dice art. */
.cc-name{position:absolute;z-index:7;left:40.05%;top:85.15%;width:20.95%;height:4.15%;display:grid;grid-template-columns:84.0% 12.3%;gap:3.7%}
.cc-name input{min-width:0;min-height:0;border:1px solid transparent;border-radius:14px;background:transparent;color:#f5ead0;text-align:center;font-size:clamp(9px,.92vw,17px);font-weight:800;outline:none;padding:0 3%;text-shadow:0 1px 3px #000;caret-color:#f0cc73}
.cc-name input::placeholder{color:rgba(226,218,197,.55)}
.cc-name input:hover,.cc-name input:focus{border-color:rgba(230,187,95,.86);box-shadow:inset 0 0 8px rgba(229,182,80,.16),0 0 7px rgba(229,182,80,.20)}
.cc-name button{min-width:0;min-height:0;padding:0;border:1px solid transparent;border-radius:18%;background:transparent;color:transparent;font-size:0;cursor:pointer;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cc-name button:hover,.cc-name button:focus-visible{border-color:rgba(242,205,112,.82);box-shadow:0 0 7px rgba(242,205,112,.28)}

/* Create / Back are hitboxes only. The baked artwork remains the sole visual. */
.cc-create,.cc-back{position:absolute;z-index:7;padding:0;border:1px solid transparent;background:transparent;color:transparent;font-size:0;cursor:pointer;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cc-create{left:39.15%;top:90.75%;width:21.10%;height:7.10%;border-radius:42%/50%}
.cc-back{left:60.82%;top:92.35%;width:11.25%;height:4.95%;border-radius:44%/50%}
.cc-create:hover:not(:disabled),.cc-create:focus-visible:not(:disabled),.cc-back:hover,.cc-back:focus-visible{border-color:rgba(255,224,139,.88);box-shadow:0 0 10px rgba(255,195,73,.30),inset 0 0 9px rgba(255,255,255,.10)}
.cc-create:disabled{cursor:not-allowed;background:rgba(1,5,6,.46);box-shadow:inset 0 0 14px rgba(0,0,0,.54);opacity:.82}

/* Validation text has its own safe region; it never becomes a fake button. */
.cc-error{position:absolute;z-index:8;right:3.5%;top:66.0%;width:22%;min-height:4%;padding:4px 8px;color:#ffd6a6;text-align:center;text-shadow:0 1px 3px #000;font-size:clamp(8px,.68vw,12px);pointer-events:none}

/* H5 / mobile landscape: preserve the exact same art geometry. Only text density changes.
   This is the rootfix for the old max-width:900px rule that switched to background-size:cover
   while moving controls to unrelated percentages. */
@media (max-width:900px) and (orientation:landscape){
  .cc-lore{top:19.5%;max-height:39%;padding:6px 7px}
  .cc-lore h2{font-size:clamp(10px,2.8dvh,16px)}
  .cc-lore b{font-size:clamp(7px,1.8dvh,10px)}
  .cc-lore p{font-size:clamp(7px,1.7dvh,10px);line-height:1.35;margin-top:5px}
  .cc-error{font-size:clamp(7px,1.7dvh,10px)}
  .cc-name input{font-size:clamp(8px,2.2dvh,13px)}
}

/* Portrait phones keep the same registered artboard rather than using cover/crop.
   Alignment is therefore deterministic; the screen can rotate without remounting controls. */
@media (max-width:900px) and (orientation:portrait){
  #JX69CreateDA::before{filter:blur(16px) brightness(.22) saturate(.68)}
  .cc-lore{padding:4px 5px;max-height:39%}
  .cc-lore h2{font-size:clamp(6px,2.7vw,11px)}
  .cc-lore b,.cc-lore p{font-size:clamp(5px,1.85vw,8px);line-height:1.25;margin-top:2px}
  .cc-error{font-size:clamp(5px,1.8vw,8px);padding:1px 2px}
  .cc-name input{font-size:clamp(6px,2.1vw,10px)}
}

/* Story intro remains responsive and independent of the artboard hitbox system. */
#JX69StoryIntroDA{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(circle at 50% 38%,rgba(21,58,53,.42),rgba(0,0,0,.84));font-family:Nunito,Tahoma,sans-serif}
.story-cy{position:relative;width:min(640px,94vw);padding:30px 34px 26px;border:3px double #b58a43;background:linear-gradient(135deg,#102923 0%,#071310 45%,#24160c 100%);box-shadow:0 25px 90px #000,inset 0 0 80px rgba(197,142,56,.12);color:#e9dfc4}
.story-cy:before,.story-cy:after{content:'';position:absolute;inset:8px;border:1px solid rgba(218,178,87,.22);pointer-events:none}
.story-cy small{display:block;color:#d7aa54;letter-spacing:.22em;font-weight:900}
.story-cy h2{margin:7px 0 15px;color:#f3d486;font:800 30px Georgia,serif}
.story-cy p{line-height:1.65;color:#d9d2bf}
.story-cy button{display:block;margin:20px auto 0;min-width:210px;padding:11px 20px;border:1px solid #d2a74c;border-radius:24px;background:linear-gradient(#276551,#113b31);color:#fff1c8;font-weight:900;font-size:16px;cursor:pointer}
.story-seal{position:absolute;right:25px;top:22px;color:#d3563e;border:1px solid #a84837;padding:5px 8px;font:900 21px serif;transform:rotate(4deg)}
.jx69-lore-cy{border-color:#755c32!important;background:linear-gradient(180deg,rgba(80,58,28,.11),rgba(10,14,12,.25))!important}
.jx69-lore-cy p{margin:0;line-height:1.55;color:#d8cfb8;font-style:italic}
@media(max-width:900px){.story-cy{padding:24px 20px 20px}.story-cy h2{font-size:22px}}