/* creator.css — the character creator (js/creator.js): the dressing tent, the hero on the rug, the choices around */
.cr-root {
  --ink: #2a2435; --gold: #ffd873; --cream: #fff3cf; --line: #a88a55;
  --s: clamp(0.62px, 0.093vmin, 1.25px); /* 1 design px (a 1080p screen = 1px) */
  position: fixed; inset: 0; z-index: 90; overflow: hidden; user-select: none; color: var(--cream);
  background: #1a1726; font: 400 calc(18 * var(--s)) / 1.45 'Mitr', system-ui, sans-serif;
}
.cr-root[hidden] { display: none; }
.cr-root button { font-family: inherit; cursor: pointer; }
.cr-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
  opacity: 0; transition: opacity 0.6s ease;
}
.cr-root.bg-on .cr-bg { opacity: 1; }
/* the sides a little darker (the menus), the middle clear (the hero) */
.cr-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 12, 24, 0.55) 0%, rgba(14, 12, 24, 0) 33%, rgba(14, 12, 24, 0) 67%, rgba(14, 12, 24, 0.55) 100%),
    linear-gradient(rgba(10, 10, 22, 0.35) 0%, rgba(10, 10, 22, 0) 22%, rgba(10, 10, 22, 0) 70%, rgba(10, 10, 22, 0.55) 100%);
}
.cr-stage { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- the title ribbon ---------- */
.cr-title {
  position: absolute; left: 50%; top: calc(22 * var(--s)); transform: translate(-50%, -140%); transition: transform 0.5s cubic-bezier(.2, 1.4, .4, 1);
  padding: calc(6 * var(--s)) calc(56 * var(--s)); background: linear-gradient(#ffe39a, #f5bf4f);
  border: calc(5 * var(--s)) solid var(--ink); border-radius: calc(16 * var(--s));
  box-shadow: inset 0 calc(-5 * var(--s)) 0 rgba(160, 90, 20, 0.35), 0 calc(7 * var(--s)) 0 rgba(0, 0, 0, 0.35);
  font: 700 calc(38 * var(--s)) / 1.25 'Mitr', sans-serif; color: var(--ink); white-space: nowrap;
}
.cr-title::before, .cr-title::after { /* the ribbon's tails */
  content: ''; position: absolute; top: calc(16 * var(--s)); width: calc(44 * var(--s)); height: calc(44 * var(--s)); z-index: -1;
  background: #d9953a; border: calc(5 * var(--s)) solid var(--ink);
}
.cr-title::before { left: calc(-34 * var(--s)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%); }
.cr-title::after { right: calc(-34 * var(--s)); clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%); }
.cr-root.in .cr-title { transform: translate(-50%, 0); }

/* ---------- the menus at the sides ---------- */
.cr-side { position: absolute; inset: 0; pointer-events: none; }
.cr-panel {
  position: absolute; top: calc(120 * var(--s)); width: min(29vw, calc(440 * var(--s))); max-height: calc(100% - 300 * var(--s));
  overflow: auto; pointer-events: auto; padding: calc(10 * var(--s)) calc(18 * var(--s)) calc(16 * var(--s));
  background: rgba(52, 48, 63, 0.9); border: calc(5 * var(--s)) solid var(--ink); border-radius: calc(20 * var(--s));
  box-shadow: inset 0 0 0 calc(4 * var(--s)) var(--line), 0 calc(10 * var(--s)) 0 rgba(0, 0, 0, 0.3);
  opacity: 0; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2, 1.2, .4, 1); scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.cr-left { left: calc(40 * var(--s)); transform: translateX(-30%); }
.cr-right { right: calc(40 * var(--s)); transform: translateX(30%); }
.cr-root.in .cr-panel { opacity: 1; transform: none; }
.cr-sec + .cr-sec { margin-top: calc(10 * var(--s)); padding-top: calc(10 * var(--s)); border-top: calc(2 * var(--s)) dashed rgba(168, 138, 85, 0.45); }
.cr-sec h3 {
  margin: 0 0 calc(8 * var(--s)); display: flex; align-items: baseline; gap: calc(10 * var(--s));
  font: 600 calc(22 * var(--s)) 'Mitr', sans-serif; color: var(--gold);
  -webkit-text-stroke: calc(4 * var(--s)) var(--ink); paint-order: stroke fill;
}
.cr-sec h3 em { font: 400 calc(16 * var(--s)) 'Mitr', sans-serif; font-style: normal; color: #e8dcc8; -webkit-text-stroke: 0; }

/* boy / girl */
.cr-gender { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--s)); }
.cr-gender button {
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--s)); padding: calc(6 * var(--s)) 0;
  border: calc(4 * var(--s)) solid var(--ink); border-radius: calc(14 * var(--s)); background: #f4f1ea; color: var(--ink);
  font: 600 calc(22 * var(--s)) 'Mitr', sans-serif; box-shadow: 0 calc(4 * var(--s)) 0 rgba(0, 0, 0, 0.3); transition: transform 0.15s, background 0.15s;
}
.cr-gender button i { font-style: normal; font: 800 calc(26 * var(--s)) / 1 'Baloo 2', sans-serif; }
.cr-gender button[data-g="m"] i { color: #3b78c8; }
.cr-gender button[data-g="f"] i { color: #e0588f; }
.cr-gender button.on[data-g="m"] { background: #9fd3ff; }
.cr-gender button.on[data-g="f"] { background: #ffb3d0; }
.cr-gender button.on { transform: translateY(calc(2 * var(--s))); box-shadow: 0 calc(2 * var(--s)) 0 rgba(0, 0, 0, 0.3), 0 0 0 calc(3 * var(--s)) var(--gold); }

/* the pictures to pick from */
.cr-grid { display: grid; gap: calc(8 * var(--s)); }
.cr-hairs { grid-template-columns: repeat(4, 1fr); }
.cr-eyes { grid-template-columns: repeat(3, 1fr); }
.cr-mouths { grid-template-columns: repeat(4, 1fr); }
.cr-opt {
  position: relative; padding: 0; border: calc(3 * var(--s)) solid var(--ink); border-radius: calc(12 * var(--s));
  background: radial-gradient(circle at 50% 38%, #fff8ea, #e6d6b8); box-shadow: 0 calc(3 * var(--s)) 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.12s, box-shadow 0.12s;
}
.cr-opt canvas { display: block; width: 100%; height: 100%; border-radius: calc(9 * var(--s)); }
.cr-opt.hair { aspect-ratio: 1 / 1.02; }
.cr-opt.eyes { aspect-ratio: 16 / 9; }
.cr-opt.mouth { aspect-ratio: 1.4 / 1; }
.cr-opt:hover { transform: translateY(calc(-2 * var(--s))); }
.cr-opt.on {
  background: radial-gradient(circle at 50% 38%, #fffbe8, #ffe39a);
  box-shadow: 0 0 0 calc(3 * var(--s)) var(--gold), 0 0 calc(14 * var(--s)) rgba(255, 216, 115, 0.75);
}
/* premium hairstyles: gold frames with a light sweeping over them, a star in the corner */
.cr-prem-sec[hidden] { display: none; }
.cr-sec h3.cr-prem-h { color: #ffe08a; animation: cr-prem-glow 1.6s ease-in-out infinite alternate; }
@keyframes cr-prem-glow { to { text-shadow: 0 0 calc(10 * var(--s)) rgba(255, 214, 110, 0.9); } }
.cr-opt.prem {
  overflow: hidden; background: radial-gradient(circle at 50% 38%, #fff6d8, #f0c665);
  box-shadow: inset 0 0 0 calc(2 * var(--s)) #ffe9a8, 0 calc(3 * var(--s)) 0 rgba(0, 0, 0, 0.3);
}
.cr-opt.prem::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 65%);
  transform: translateX(-120%); animation: cr-shine 2.8s ease-in-out infinite;
}
.cr-opt.prem:nth-child(2n)::before { animation-delay: 0.7s; }
.cr-opt.prem:nth-child(3n)::before { animation-delay: 1.4s; }
@keyframes cr-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.cr-opt.prem::after {
  content: '✦'; position: absolute; right: calc(3 * var(--s)); top: calc(-1 * var(--s)); pointer-events: none;
  font: 700 calc(16 * var(--s)) / 1 'Mitr', sans-serif; color: #ffd24a; -webkit-text-stroke: calc(3 * var(--s)) var(--ink); paint-order: stroke fill;
}
.cr-opt.prem.on {
  background: radial-gradient(circle at 50% 38%, #fffbe8, #ffd873);
  box-shadow: 0 0 0 calc(3 * var(--s)) #ffd24a, 0 0 calc(18 * var(--s)) rgba(255, 200, 80, 0.95);
}
/* colours */
.cr-swatches { display: flex; flex-wrap: wrap; gap: calc(8 * var(--s)); }
.cr-sw {
  width: calc(34 * var(--s)); height: calc(34 * var(--s)); padding: 0; border-radius: 50%; border: calc(3 * var(--s)) solid var(--ink);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55) 0 18%, transparent 20%), var(--c);
  box-shadow: 0 calc(3 * var(--s)) 0 rgba(0, 0, 0, 0.3); transition: transform 0.12s;
}
.cr-sw:hover { transform: scale(1.1); }
.cr-sw.on { transform: scale(1.18); box-shadow: 0 0 0 calc(3 * var(--s)) var(--cream), 0 0 0 calc(6 * var(--s)) var(--ink); }

/* ---------- turning the hero, a pose, the hat ---------- */
.cr-turn {
  position: absolute; left: 50%; bottom: calc(205 * var(--s)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(10 * var(--s));
}
.cr-round, .cr-pill {
  border: calc(4 * var(--s)) solid var(--ink); background: #f4f1ea; color: var(--ink); box-shadow: 0 calc(4 * var(--s)) 0 rgba(0, 0, 0, 0.35);
  font: 700 calc(18 * var(--s)) 'Mitr', sans-serif; transition: transform 0.12s;
}
.cr-round { width: calc(46 * var(--s)); height: calc(46 * var(--s)); border-radius: 50%; padding: 0; font-size: calc(18 * var(--s)); }
.cr-pill { height: calc(46 * var(--s)); padding: 0 calc(16 * var(--s)); border-radius: calc(23 * var(--s)); }
.cr-pill.on { background: var(--gold); }
.cr-round:hover, .cr-pill:hover { transform: translateY(calc(-2 * var(--s))); }
.cr-round:active, .cr-pill:active { transform: translateY(calc(2 * var(--s))); }

/* ---------- the name and the buttons ---------- */
.cr-bottom {
  position: absolute; left: 50%; bottom: calc(28 * var(--s)); transform: translateX(-50%); width: min(92vw, calc(620 * var(--s)));
  display: flex; flex-direction: column; align-items: stretch; gap: calc(6 * var(--s));
}
.cr-name { position: relative; }
.cr-input {
  width: 100%; box-sizing: border-box; padding: calc(6 * var(--s)) calc(60 * var(--s)); border-radius: calc(16 * var(--s));
  border: calc(5 * var(--s)) solid var(--ink); background: #f4f1ea; color: var(--ink); outline: none; text-align: center;
  font: 600 calc(28 * var(--s)) 'Mitr', sans-serif; box-shadow: 0 calc(6 * var(--s)) 0 rgba(0, 0, 0, 0.35); user-select: text;
}
.cr-input:focus { box-shadow: 0 0 0 calc(4 * var(--s)) var(--gold), 0 calc(6 * var(--s)) 0 rgba(0, 0, 0, 0.35); }
.cr-dice {
  position: absolute; right: calc(10 * var(--s)); top: 50%; transform: translateY(-50%); width: calc(42 * var(--s)); height: calc(42 * var(--s));
  padding: 0; border: none; background: none; font-size: calc(26 * var(--s)); transition: transform 0.2s;
}
.cr-dice:hover { transform: translateY(-50%) rotate(-20deg) scale(1.1); }
.cr-err { min-height: calc(24 * var(--s)); text-align: center; color: #ffb0a8; font-size: calc(17 * var(--s)); -webkit-text-stroke: calc(3 * var(--s)) var(--ink); paint-order: stroke fill; }
.cr-actions { display: flex; gap: calc(12 * var(--s)); justify-content: center; }
.cr-btn {
  flex: 0 1 auto; padding: calc(6 * var(--s)) calc(26 * var(--s)); border: calc(5 * var(--s)) solid var(--ink); border-radius: calc(14 * var(--s));
  background: #f4f1ea; color: var(--ink); font: 700 calc(24 * var(--s)) 'Mitr', sans-serif; white-space: nowrap;
  box-shadow: 0 calc(6 * var(--s)) 0 rgba(0, 0, 0, 0.35); transition: transform 0.12s, box-shadow 0.12s;
}
.cr-btn:hover { transform: translateY(calc(-2 * var(--s))); }
.cr-btn:active { transform: translateY(calc(3 * var(--s))); box-shadow: 0 calc(3 * var(--s)) 0 rgba(0, 0, 0, 0.35); }
.cr-random { background: #8fd0ff; }
.cr-go { background: var(--gold); padding-left: calc(40 * var(--s)); padding-right: calc(40 * var(--s)); animation: cr-glow 1.2s ease-in-out infinite alternate; }
@keyframes cr-glow { to { box-shadow: 0 calc(6 * var(--s)) 0 rgba(0, 0, 0, 0.35), 0 0 calc(18 * var(--s)) rgba(255, 216, 115, 0.8); } }
.cr-cancel[hidden] { display: none; }

/* ---------- a tall narrow screen (a phone): the hero on top, the menus below it, the buttons at the bottom ---------- */
.cr-root.narrow { --s: clamp(0.55px, 0.16vmin, 1px); }
.cr-root.narrow .cr-side {
  top: 50%; bottom: calc(180 * var(--s)); pointer-events: auto; overflow: auto; display: flex; flex-direction: column;
  gap: calc(12 * var(--s)); padding: 0 12px;
}
.cr-root.narrow .cr-panel { position: relative; top: auto; left: auto; right: auto; width: auto; max-height: none; overflow: visible; flex: none; }
.cr-root.narrow .cr-turn { bottom: auto; top: calc(50% - 60 * var(--s)); }
.cr-root.narrow .cr-title { font-size: calc(30 * var(--s)); }
.cr-root.narrow .cr-hairs { grid-template-columns: repeat(6, 1fr); }
.cr-root.narrow .cr-eyes { grid-template-columns: repeat(4, 1fr); }
.cr-root.narrow .cr-mouths { grid-template-columns: repeat(6, 1fr); }

/* ---------- the name rules (js/creator.js check / bad / askSure) ---------- */
.cr-count {
  position: absolute; left: calc(20 * var(--s)); top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none;
  font: 600 calc(16 * var(--s)) 'Mitr', sans-serif; color: #8a7f95;
}
.cr-count.full { color: #c0563f; }
.cr-err.soft { color: #f1e6c8; }
.cr-shake { animation: cr-shake 0.35s; }
@keyframes cr-shake { 20% { transform: translateX(calc(-8 * var(--s))); } 45% { transform: translateX(calc(7 * var(--s))); } 70% { transform: translateX(calc(-4 * var(--s))); } }
.cr-go:disabled { animation: none; filter: grayscale(0.8) brightness(0.82); cursor: not-allowed; transform: none; }
.cr-root.sending .cr-go:disabled { filter: none; cursor: progress; }
.cr-btn:disabled { cursor: not-allowed; }
.cr-root.name-locked .cr-input { background: #e3ddd0; color: #4e4560; cursor: default; }
.cr-root.name-locked .cr-dice { display: none; }
/* "ใช้ชื่อ … ใช่ไหม?" before a new hero is made (online: the name is for good) */
.cr-ask { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(12, 10, 22, 0.62); }
.cr-ask[hidden] { display: none; }
.cr-ask-box {
  width: min(90vw, calc(560 * var(--s))); box-sizing: border-box; padding: calc(26 * var(--s)) calc(28 * var(--s)) calc(24 * var(--s));
  border: calc(5 * var(--s)) solid var(--ink); border-radius: calc(20 * var(--s)); background: #fbf3df; color: var(--ink); text-align: center;
  box-shadow: 0 calc(10 * var(--s)) 0 rgba(0, 0, 0, 0.4); animation: cr-pop 0.25s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes cr-pop { from { transform: scale(0.85); opacity: 0; } }
.cr-ask-q { font: 600 calc(26 * var(--s)) / 1.4 'Mitr', sans-serif; overflow-wrap: anywhere; }
.cr-ask-q b { color: #b5651d; font-size: calc(30 * var(--s)); }
.cr-ask-note { margin: calc(8 * var(--s)) 0 calc(20 * var(--s)); font-size: calc(18 * var(--s)); color: #7a5d8a; }
.cr-ask-btns { display: flex; gap: calc(14 * var(--s)); justify-content: center; flex-wrap: wrap; }