:root {
  color-scheme: only light;
  --ink: #000000;
  --paper: #ffffff;
  --silver: #e4e6ea;
  --steel: #8c919b;
  --closet: #ffffff;
  --page: #dfe1e6;
  --page-dot: #c5c8cf;

  --line: 0.125rem;
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;

  --z-stage-bg: 1;
  --z-braid: 2;
  --z-body: 3;
  --z-face: 4;
  --z-clothes: 5;
  --z-stage-ui: 50;
  --z-color-box: 80;
  --z-drag: 900;
  --z-modal: 1000;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body {
  position: relative;
  background-color: #dfe1e6;
  background-color: var(--page);
  background-image: -webkit-radial-gradient(#c5c8cf 0.09rem, transparent 0.1rem);
  background-image: radial-gradient(#c5c8cf 0.09rem, transparent 0.1rem);
  background-image: -webkit-radial-gradient(var(--page-dot) 0.09rem, transparent 0.1rem);
  background-image: radial-gradient(var(--page-dot) 0.09rem, transparent 0.1rem);
  background-size: 1.25rem 1.25rem;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: #000000;
  color: var(--ink);
}

button {
  font-family: inherit;
  color: #000000;
  color: var(--ink);
  cursor: pointer;
}
button:focus { outline: none; }
button:focus-visible { outline: 0.125rem dashed #000000; outline: var(--line) dashed var(--ink); outline-offset: 0.125rem; }

#safe-area-probe {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}
#game-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 80rem;
  height: 50rem;
  background: #ffffff;
  background: var(--paper);
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 0.75rem;
  border-radius: var(--radius-m);
  overflow: hidden;
}
#game-frame.is-fullbleed {
  border: none;
  border-radius: 0;
}

#game-header,
#stage-area,
#closet-box-wrapper {
  position: absolute;
}
#game-header {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  min-height: 2.25rem;
}

.brand-title {
  -webkit-box-flex: 1;
          flex: 1 1 auto;
  font-size: 1.375rem;
  font-size: max(1.375rem, 15px);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  margin-right: 0.5rem;
}
.brand-title.is-custom {
  white-space: normal;
  width: 0;
}

.pill-btn {
  font-size: 0.875rem;
  font-size: max(0.875rem, 13px);
  font-weight: 700;
  line-height: 1.2;
  background: #ffffff;
  background: var(--paper);
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 1rem;
  padding: 0.25rem 0.875rem;
  min-width: 3rem;
}
.pill-btn.solid {
  background: #000000;
  background: var(--ink);
  color: #ffffff;
  color: var(--paper);
}
.pill-btn:active {
  background: #000000;
  background: var(--ink);
  color: #ffffff;
  color: var(--paper);
}
.pill-btn.solid:active {
  background: #ffffff;
  background: var(--paper);
  color: #000000;
  color: var(--ink);
}
.import-btn {
  flex-shrink: 0;
  margin-right: 0.5rem;
  white-space: nowrap;
}
.is-custom-game .import-btn { display: none; }

.lang-switch {
  display: -webkit-box;
  display: flex;
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 1rem;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-option {
  font-size: 0.875rem;
  font-size: max(0.875rem, 13px);
  font-weight: 700;
  line-height: 1.2;
  min-width: 2.75rem;
  padding: 0.25rem 0.625rem;
  border: none;
  background: #ffffff;
  background: var(--paper);
  color: #000000;
  color: var(--ink);
}
.lang-option.active {
  background: #000000;
  background: var(--ink);
  color: #ffffff;
  color: var(--paper);
}
.is-portrait .lang-option { font-size: 1rem; padding: 0.375rem 0.875rem; }
#stage-area {
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 0.75rem;
  border-radius: var(--radius-m);
  overflow: hidden;
  touch-action: none;
}

#stage-bg-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  z-index: var(--z-stage-bg);
  pointer-events: none;
}

#mannequin-viewport {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4rem;
  width: 18rem;
  z-index: 2;
  z-index: var(--z-braid);
}

#mannequin-world {
  position: absolute;
  pointer-events: none;
}

#braid-layers-container,
#clothing-layers-container,
#stage-body-canvas,
#stage-face-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#braid-layers-container { z-index: 2; z-index: var(--z-braid); }
#stage-body-canvas { z-index: 3; z-index: var(--z-body); }
#stage-face-canvas { z-index: 4; z-index: var(--z-face); }
#clothing-layers-container { z-index: 5; z-index: var(--z-clothes); }

.worn-clothing-layer {
  position: absolute;
  pointer-events: none;
}
.worn-clothing-layer img,
.wardrobe-item-slot img,
.drag-ghost img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.worn-clothing-layer.is-lifted { visibility: hidden; }
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 900;
  z-index: var(--z-drag);
  pointer-events: none;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
#face-switchers-wing {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 50;
  z-index: var(--z-stage-ui);
}

.wing-btn {
  display: block;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: #ffffff;
  background: var(--paper);
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 0.375rem;
  border-radius: var(--radius-s);
  line-height: 0;
}
.wing-btn + .wing-btn { margin-top: 0.375rem; }
.wing-btn:active { background: #e4e6ea; background: var(--silver); }

.wing-icon {
  display: block;
  width: 2.125rem;
  height: 2.125rem;
  margin: 0 auto;
}

.wing-swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
}

.wing-eye-color-dot {
  position: absolute;
  right: -0.375rem;
  bottom: -0.375rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  background: #5B8FE4;
}
.independent-color-box {
  position: fixed;
  left: 0;
  top: 0;
  color: #000000;
  color: var(--ink);
  background: #ffffff;
  background: var(--paper);
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 0.75rem;
  border-radius: var(--radius-m);
  padding: 0.5rem 0.625rem 0.625rem;
  z-index: 80;
  z-index: var(--z-color-box);
  text-align: center;
}
.independent-color-box.hidden { display: none; }
.independent-color-box .IroColorPicker { display: inline-block; vertical-align: top; }

.color-box-header {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  font-size: 0.875rem;
  font-size: max(0.875rem, 13px);
  font-weight: 800;
  line-height: 1.5;
  text-align: left;
  border-bottom: 0.0625rem solid #e4e6ea;
  border-bottom: 0.0625rem solid var(--silver);
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
  cursor: move;
  touch-action: none;
}
.color-box-header span { display: block; margin-right: 0.5rem; }
.btn-box-close {
  color: #000000;
  color: var(--ink);
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 800;
  width: 1.75rem;
  height: 1.75rem;
}
#bg-picker-grid {
  width: 20.5rem;
  max-height: 26rem;
  max-height: min(26rem, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #8c919b transparent;
  scrollbar-color: var(--steel) transparent;
}
#bg-picker-grid::-webkit-scrollbar { width: 0.375rem; }
#bg-picker-grid::-webkit-scrollbar-thumb { background: #8c919b; background: var(--steel); border-radius: 0.1875rem; }
#bg-picker-grid::-webkit-scrollbar-track { background: transparent; }
.bg-option {
  display: block;
  float: left;
  width: 4.5rem;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0;
  border: none;
  background: none;
  color: #000000;
  color: var(--ink);
  font-size: 0.75rem;
  font-size: max(0.75rem, 11px);
  line-height: 1.3;
  text-align: center;
}
.bg-option:nth-child(4n) { margin-right: 0; }
.bg-option:nth-child(4n + 1) { clear: left; }
.bg-option canvas {
  display: block;
  width: 4.5rem;
  height: 6rem;
  margin-bottom: 0.25rem;
  border: 0.125rem solid #e4e6ea;
  border: var(--line) solid var(--silver);
  border-radius: 0.375rem;
  border-radius: var(--radius-s);
}
.bg-option.active canvas { border-color: #000000; border-color: var(--ink); }
#stage-action-buttons {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 50;
  z-index: var(--z-stage-ui);
}

.round-btn {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  background: #ffffff;
  background: var(--paper);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}
.round-btn + .round-btn { margin-top: 0.5rem; }
.round-btn svg {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0 auto;
  fill: currentColor;
}
.round-btn.solid {
  background: #000000;
  background: var(--ink);
  color: #ffffff;
  color: var(--paper);
}
.round-btn:active {
  background: #000000;
  background: var(--ink);
  color: #ffffff;
  color: var(--paper);
}
.round-btn.solid:active {
  background: #ffffff;
  background: var(--paper);
  color: #000000;
  color: var(--ink);
}
.wing-right #face-switchers-wing { left: auto; right: 0.5rem; }
.actions-bottom-left #stage-action-buttons { right: auto; left: 0.5rem; }
.actions-top-right #stage-action-buttons { bottom: auto; top: 0.5rem; }
.actions-top-left #stage-action-buttons { right: auto; left: 0.5rem; bottom: auto; top: 0.5rem; }
.actions-bottom-left #stage-copyright,
.actions-top-left #stage-copyright { left: auto; right: 0.5rem; text-align: right; }
.tabs-bottom #stage-pages-nav { margin-bottom: 0; margin-top: 0.5rem; }

#stage-copyright {
  position: absolute;
  left: 0.5rem;
  bottom: 0.25rem;
  z-index: 50;
  z-index: var(--z-stage-ui);
  font-size: 1rem;
  font-size: max(1rem, 13px);
  font-weight: 700;
  line-height: 1.5;
  color: #000000;
  text-shadow: 1px 0 #ffffff, -1px 0 #ffffff, 0 1px #ffffff, 0 -1px #ffffff, 1px 1px #ffffff, -1px -1px #ffffff, 1px -1px #ffffff, -1px 1px #ffffff;
  pointer-events: none;
}
.is-portrait .wing-btn { width: 3.5rem; height: 3.5rem; }
.is-portrait .wing-icon { width: 2.75rem; height: 2.75rem; }
.is-portrait .wing-eye-color-dot { width: 1.375rem; height: 1.375rem; }
.is-portrait .round-btn { width: 4rem; height: 4rem; font-size: 1.75rem; }
.is-portrait .round-btn svg { width: 2rem; height: 2rem; }
.is-portrait .page-tab-btn { width: 3.75rem; height: 3.75rem; }
.is-portrait .page-tab-btn img { width: 2.75rem; height: 2.75rem; }
.is-portrait .btn-box-close { width: 2.5rem; height: 2.5rem; }
.is-portrait .pill-btn { font-size: 1rem; padding: 0.375rem 1rem; }
#stage-pages-nav {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  margin-bottom: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  touch-action: pan-x;
  scrollbar-width: none;
}
#stage-pages-nav::-webkit-scrollbar { display: none; }

.page-tab-btn {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  border-radius: var(--radius-s);
  background: #ffffff;
  background: var(--paper);
  border: 0.125rem solid #e4e6ea;
  border: var(--line) solid var(--silver);
  flex-shrink: 0;
  padding: 0;
}
.page-tab-btn + .page-tab-btn { margin-left: 0.375rem; }
.page-tab-btn.active {
  border-color: #000000;
  border-color: var(--ink);
  background: #e4e6ea;
  background: var(--silver);
}
.page-tab-btn img {
  display: block;
  width: 2.125rem;
  height: 2.125rem;
}

#fixed-wardrobe-box {
  position: relative;
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 0.75rem;
  border-radius: var(--radius-m);
  background: #ffffff;
  background: var(--closet);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: #8c919b transparent;
  scrollbar-color: var(--steel) transparent;
}
#fixed-wardrobe-box::-webkit-scrollbar { width: 0.3125rem; }
#fixed-wardrobe-box::-webkit-scrollbar-thumb {
  background: #8c919b;
  background: var(--steel);
  border-radius: 0.25rem;
}

.wardrobe-item-slot {
  position: absolute;
  cursor: -webkit-grab;
  cursor: grab;
  touch-action: none;
}
.wardrobe-item-slot.is-worn,
.wardrobe-item-slot.is-lifted {
  visibility: hidden;
  pointer-events: none;
}
.wardrobe-grid-cell {
  position: absolute;
  border: 0.125rem solid #e4e6ea;
  border: var(--line) solid var(--silver);
  border-radius: 0.375rem;
  border-radius: var(--radius-s);
  background: #ffffff;
  background: var(--paper);
  pointer-events: none;
}

#stage-pages-nav.hidden,
.wing-btn.hidden,
#stage-copyright.hidden { display: none; }
#photo-modal-view {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.82);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  z-index: 1000;
  z-index: var(--z-modal);
  padding: 1rem;
}
#photo-modal-view.hidden { display: none; }

.photo-modal-card {
  color: #000000;
  color: var(--ink);
  background: #ffffff;
  background: var(--paper);
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 0.75rem;
  border-radius: var(--radius-m);
  padding: 1rem;
  max-width: 100%;
  max-height: 100%;
}

#modal-photo-img {
  display: block;
  margin: 0 auto 0.75rem;
  border: 0.0625rem solid #000000;
  border: 0.0625rem solid var(--ink);
  border-radius: 0.375rem;
  border-radius: var(--radius-s);
  -webkit-touch-callout: default;
}

.credit-block {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  font-size: 0.875rem;
  font-size: max(0.875rem, 13px);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.credit-avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 0.375rem;
  flex-shrink: 0;
  margin-right: 0.625rem;
}
.credit-text {
  -webkit-box-flex: 1;
          flex: 1 1 0;
  width: 0;
}
.credit-text a {
  color: #000000;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.modal-actions {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
.modal-actions .pill-btn + .pill-btn { margin-left: 0.75rem; }
.nav-focus {
  outline: 0.1875rem solid #000000;
  outline: 0.1875rem solid var(--ink);
  outline-offset: 0.125rem;
}
.nav-focus.nav-adjusting { outline-style: dashed; }
.photo-save-status { display: none; }
.is-app .photo-save-status,
.is-download-blocked .photo-save-status {
  display: block;
  min-height: 1.5em;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-size: max(0.875rem, 13px);
  line-height: 1.5;
  text-align: center;
}
.pill-btn:disabled { opacity: 0.5; }
#boot-box {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #dfe1e6;
  background-color: var(--page);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  z-index: 1000;
  z-index: var(--z-modal);
  padding: 1rem;
}
#boot-box.hidden { display: none; }
.boot-card {
  width: 100%;
  max-width: 24rem;
  max-height: 100%;
  overflow-y: auto;
  color: #000000;
  color: var(--ink);
  background: #ffffff;
  background: var(--paper);
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 0.75rem;
  border-radius: var(--radius-m);
  padding: 1rem;
  text-align: center;
}
.boot-text {
  font-size: 1rem;
  font-size: max(1rem, 14px);
  line-height: 1.5;
  font-weight: 700;
}
#boot-picker.hidden { display: none; }
.boot-choose {
  display: block;
  position: relative;
  margin-top: 0.75rem;
  cursor: pointer;
}
.boot-file {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.boot-list-title {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-size: max(0.875rem, 13px);
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
}
.boot-list-title.hidden { display: none; }
.boot-row {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  margin-top: 0.5rem;
  text-align: left;
}
.boot-row-name {
  -webkit-box-flex: 1;
          flex: 1 1 0;
  width: 0;
  font-size: 0.875rem;
  font-size: max(0.875rem, 13px);
  line-height: 1.5;
  word-wrap: break-word;
  margin-right: 0.5rem;
}
.boot-row .pill-btn + .pill-btn { margin-left: 0.5rem; }
.boot-none {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-size: max(0.875rem, 13px);
  line-height: 1.5;
  text-align: left;
}
.is-custom-game .credit-block { display: none; }
.hair-chip {
  position: fixed;
  z-index: 80;
  z-index: var(--z-color-box);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  padding: 0.25rem 0.625rem;
  background: #ffffff;
  background: var(--paper);
  border: 0.125rem solid #000000;
  border: var(--line) solid var(--ink);
  border-radius: 1.25rem;
  cursor: pointer;
}
.hair-chip.hidden { display: none; }
.hair-chip-dot {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 0.0625rem solid #000000;
  border: 0.0625rem solid var(--ink);
  margin-right: 0.375rem;
}
.hair-chip-wheel {
  display: block;
  width: 1.625rem;
  height: 1.625rem;
}

.skin-fx {
  position: fixed;
  z-index: 1100;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  pointer-events: none;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transition: left 0.6s ease-out, top 0.6s ease-out, opacity 0.6s ease-in, -webkit-transform 0.6s ease-out;
  transition: left 0.6s ease-out, top 0.6s ease-out, opacity 0.6s ease-in, -webkit-transform 0.6s ease-out;
  transition: left 0.6s ease-out, top 0.6s ease-out, opacity 0.6s ease-in, transform 0.6s ease-out;
  transition: left 0.6s ease-out, top 0.6s ease-out, opacity 0.6s ease-in, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  -webkit-transform: scale(0.55);
  transform: scale(0.55);
}
.skin-fx.go {
  opacity: 0;
  -webkit-transform: scale(1.2) rotate(70deg);
  transform: scale(1.2) rotate(70deg);
}
html[data-skin="candy"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect x='12' y='14' width='11' height='4' rx='2' transform='rotate(32 17 16)' fill='%23ff8fbd'/%3E%3Crect x='70' y='20' width='11' height='4' rx='2' transform='rotate(-40 75 22)' fill='%238fe3cf'/%3E%3Crect x='98' y='70' width='11' height='4' rx='2' transform='rotate(20 103 72)' fill='%23ffe27a'/%3E%3Crect x='30' y='84' width='11' height='4' rx='2' transform='rotate(-25 35 86)' fill='%23c9b6ff'/%3E%3Crect x='56' y='58' width='9' height='3.4' rx='1.7' transform='rotate(58 60 60)' fill='%23ffffff'/%3E%3Cpath d='M95 12c-6-5-3-10 1-6 4-4 7 1 1 6z' fill='%23ff6fa8'/%3E%3Cpath d='M20 52c-6-5-3-10 1-6 4-4 7 1 1 6z' fill='%23ffffff'/%3E%3Cpath d='M64 100c-6-5-3-10 1-6 4-4 7 1 1 6z' fill='%23ff6fa8'/%3E%3Ccircle cx='46' cy='36' r='3' fill='%23ffffff'/%3E%3Ccircle cx='108' cy='104' r='3' fill='%23ffffff'/%3E%3Ccircle cx='8' cy='108' r='2.4' fill='%238fe3cf'/%3E%3C/svg%3E");
    background-size: 7.5rem 7.5rem;
  }
html[data-skin="candy"] #game-frame {
    border-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='10' cy='10' r='2.2' fill='%23ffd0e5'/%3E%3Ccircle cx='30' cy='30' r='2.2' fill='%23ffd0e5'/%3E%3Ccircle cx='30' cy='10' r='1.4' fill='%23c9f1e6'/%3E%3Ccircle cx='10' cy='30' r='1.4' fill='%23fff0b3'/%3E%3C/svg%3E");
    background-size: 2.5rem 2.5rem;
    box-shadow: inset 0 0 0 0.18rem #ffb3d3, inset 0 0 0 0.3rem #fff5fa, inset 0 0 0 0.4rem #ffd9ea;
    outline: 0.22rem solid #ffc2dc;
    outline-offset: 0.18rem;
  }
html[data-skin="candy"] #game-frame:not(.is-fullbleed) { border-radius: 1.25rem; }
html[data-skin="candy"] #game-header {
    background: var(--silver);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.3rem var(--silver), 0 0 0 0.4rem #ff9cc4;
  }
html[data-skin="candy"] #game-header::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -0.34rem;
    height: 0.2rem;
    background: -webkit-repeating-linear-gradient(left, #ff6fa8 0, #ff6fa8 0.6rem, #fff5fa 0.6rem, #fff5fa 0.9rem, #8fe3cf 0.9rem, #8fe3cf 1.5rem, #fff5fa 1.5rem, #fff5fa 1.8rem);
    background: repeating-linear-gradient(90deg, #ff6fa8 0, #ff6fa8 0.6rem, #fff5fa 0.6rem, #fff5fa 0.9rem, #8fe3cf 0.9rem, #8fe3cf 1.5rem, #fff5fa 1.5rem, #fff5fa 1.8rem);
    border-radius: 0.1rem;
    pointer-events: none;
  }
html[data-skin="candy"] .brand-title { font-weight: 900; }
html[data-skin="candy"] .pill-btn { box-shadow: inset 0 0 0 0.14rem #ffc2dc; }
html[data-skin="candy"] .pill-btn.solid { box-shadow: inset 0 0 0 0.14rem #ff9cc4; }
html[data-skin="candy"] .lang-switch { box-shadow: 0 0 0 0.14rem #ffc2dc; }
html[data-skin="candy"] #stage-area {
    border-color: var(--ink);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.16rem #ffc2dc;
    outline: 0.12rem dashed #ff6fa8;
    outline-offset: 0.2rem;
  }
html[data-skin="candy"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.12rem dashed #ff9cc4;
    border-radius: 0.7rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="candy"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: 0.3rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='120' height='32' viewBox='0 0 120 32'%3E%3Cpath d='M0 4Q15 10 30 4T60 4T90 4T120 4' fill='none' stroke='%238a1c52' stroke-width='1.4'/%3E%3Cpath d='M3 6.6L25 6.6 14 28Z' fill='%23ff9cc4'/%3E%3Cpath d='M33 6.6L55 6.6 44 28Z' fill='%238fe3cf'/%3E%3Cpath d='M63 6.6L85 6.6 74 28Z' fill='%23ffe27a'/%3E%3Cpath d='M93 6.6L115 6.6 104 28Z' fill='%23c9b6ff'/%3E%3Ccircle cx='14' cy='12' r='2' fill='%23ffffff'/%3E%3Ccircle cx='44' cy='12' r='2' fill='%23ffffff'/%3E%3Ccircle cx='74' cy='12' r='2' fill='%23ffffff'/%3E%3Ccircle cx='104' cy='12' r='2' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 7.5rem 2rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="candy"] .wing-btn {
    border-radius: 0.7rem;
    box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #ff9cc4;
  }
html[data-skin="candy"] .round-btn {
    background-image: -webkit-radial-gradient(24% 21%, circle, #ffffff 0, #ffffff 0.16rem, transparent 0.18rem);
    background-image: radial-gradient(circle at 24% 21%, #ffffff 0, #ffffff 0.16rem, transparent 0.18rem);
    box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #ff9cc4;
  }
html[data-skin="candy"] .round-btn.solid { box-shadow: inset 0 0 0 0.14rem #ff9cc4, 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #ff9cc4; }
html[data-skin="candy"] .page-tab-btn { border-radius: 0.6rem; }
html[data-skin="candy"] .page-tab-btn.active { box-shadow: inset 0 0 0 0.12rem #ffb3d3; }
html[data-skin="candy"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='8' cy='8' r='1.6' fill='%23ffe6f0'/%3E%3Ccircle cx='24' cy='24' r='1.6' fill='%23ffe6f0'/%3E%3Ccircle cx='24' cy='8' r='1' fill='%23e3f7f0'/%3E%3Ccircle cx='8' cy='24' r='1' fill='%23fff4c7'/%3E%3C/svg%3E");
    background-size: 2rem 2rem;
    box-shadow: 0 0 0 0.16rem #ffc2dc;
  }
html[data-skin="candy"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.16rem #ffc2dc, 0 0 0 0.28rem #ffffff;
  }
html[data-skin="candy"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #ff9cc4;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="candy"] .btn-box-close {
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 0.12rem #ff9cc4;
  }
html[data-skin="candy"] .hair-chip { box-shadow: 0 0 0 0.16rem #ffc2dc, 0 0 0 0.28rem #ffffff; }
html[data-skin="candy"] .bg-option canvas { border-color: #ffc2dc; border-radius: 0.5rem; }
html[data-skin="candy"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #ff9cc4; }
html[data-skin="candy"] #photo-modal-view { background-color: rgba(86, 18, 52, 0.84); }
html[data-skin="candy"] .photo-modal-card,
html[data-skin="candy"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 1.25rem;
    box-shadow: 0 0 0 0.2rem #ffc2dc, 0 0 0 0.34rem #ffffff;
  }
html[data-skin="candy"] .photo-modal-card::before,
html[data-skin="candy"] .boot-card::before {
    content: '';
    position: absolute;
    left: -0.55rem;
    top: -0.55rem;
    width: 1.5rem;
    height: 1.5rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 17C-3 8 2 -1 10 5C18 -1 23 8 10 17Z' fill='%23ff6fa8' stroke='%238a1c52' stroke-width='1.2'/%3E%3Ccircle cx='6.5' cy='6' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }
html[data-skin="candy"] #modal-photo-img { border-radius: 0.5rem; }
html[data-skin="candy"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect x='12' y='14' width='11' height='4' rx='2' transform='rotate(32 17 16)' fill='%23ff8fbd'/%3E%3Crect x='70' y='20' width='11' height='4' rx='2' transform='rotate(-40 75 22)' fill='%238fe3cf'/%3E%3Crect x='98' y='70' width='11' height='4' rx='2' transform='rotate(20 103 72)' fill='%23ffe27a'/%3E%3Cpath d='M95 12c-6-5-3-10 1-6 4-4 7 1 1 6z' fill='%23ff6fa8'/%3E%3Ccircle cx='46' cy='36' r='3' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 7.5rem 7.5rem;
  }
html[data-skin="candy"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 17C-3 8 2 -1 10 5C18 -1 23 8 10 17Z' fill='%23ff6fa8'/%3E%3C/svg%3E"); }
html[data-skin="candy"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='2' y='7' width='16' height='6' rx='3' fill='%238fe3cf' transform='rotate(35 10 10)'/%3E%3C/svg%3E"); }
html[data-skin="candy"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 1L12.6 7.4 19 8 14 12.4 15.6 19 10 15.4 4.4 19 6 12.4 1 8 7.4 7.4Z' fill='%23ffd24a'/%3E%3C/svg%3E"); }
html[data-skin="bread"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M8 20c4-6 8-6 12 0' fill='none' stroke='%23d3b077' stroke-width='1.6'/%3E%3Cpath d='M14 12v14' stroke='%23d3b077' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='14' r='2.2' fill='%23d3b077'/%3E%3Ccircle cx='70' cy='22' r='1.4' fill='%23d3b077'/%3E%3Ccircle cx='54' cy='24' r='1.2' fill='%23cfa968'/%3E%3Cpath d='M52 66c4-6 8-6 12 0' fill='none' stroke='%23d3b077' stroke-width='1.6'/%3E%3Cpath d='M58 58v14' stroke='%23d3b077' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='70' r='2.2' fill='%23d3b077'/%3E%3Ccircle cx='30' cy='78' r='1.4' fill='%23d3b077'/%3E%3Ccircle cx='14' cy='80' r='1.2' fill='%23cfa968'/%3E%3Ccircle cx='84' cy='60' r='1.6' fill='%23d3b077'/%3E%3Ccircle cx='90' cy='88' r='1.6' fill='%23d3b077'/%3E%3C/svg%3E");
    background-size: 6rem 6rem;
  }
html[data-skin="bread"] #game-frame {
    border-color: var(--ink);
    background-image: -webkit-linear-gradient(left, transparent 0, transparent 1.6rem, rgba(205, 90, 70, 0.28) 1.6rem, rgba(205, 90, 70, 0.28) 1.66rem, transparent 1.66rem),
      -webkit-repeating-linear-gradient(bottom, transparent 0, transparent 1.15rem, rgba(160, 114, 47, 0.16) 1.15rem, rgba(160, 114, 47, 0.16) 1.2rem);
    background-image: linear-gradient(90deg, transparent 0, transparent 1.6rem, rgba(205, 90, 70, 0.28) 1.6rem, rgba(205, 90, 70, 0.28) 1.66rem, transparent 1.66rem),
      repeating-linear-gradient(0deg, transparent 0, transparent 1.15rem, rgba(160, 114, 47, 0.16) 1.15rem, rgba(160, 114, 47, 0.16) 1.2rem);
    box-shadow: inset 0 0 0 0.2rem #e0a850, inset 0 0 0 0.3rem #fff6e2, inset 0 0 0 0.4rem #b9772e;
    outline: 0.25rem solid #d9b36c;
    outline-offset: 0.18rem;
  }
html[data-skin="bread"] #game-frame:not(.is-fullbleed) { border-radius: 0.6rem; }
html[data-skin="bread"] #game-header {
    background: var(--silver);
    border-radius: 0.4rem;
    box-shadow: 0 0 0 0.3rem var(--silver), 0 0 0 0.4rem #c98a3a;
  }
html[data-skin="bread"] #game-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.62rem;
    height: 0.32rem;
    background: -webkit-radial-gradient(50% 0, circle, #e0a850 0, #e0a850 0.28rem, transparent 0.3rem) repeat-x;
    background: radial-gradient(circle at 50% 0, #e0a850 0, #e0a850 0.28rem, transparent 0.3rem) repeat-x;
    background-size: 0.8rem 0.32rem;
    pointer-events: none;
  }
html[data-skin="bread"] .brand-title { font-weight: 900; }
html[data-skin="bread"] .pill-btn {
    border-radius: 0.4rem;
    background-image: -webkit-linear-gradient(bottom, #f0cf8a 0, #f0cf8a 0.28rem, transparent 0.28rem);
    background-image: linear-gradient(0deg, #f0cf8a 0, #f0cf8a 0.28rem, transparent 0.28rem);
  }
html[data-skin="bread"] .pill-btn.solid { background-image: -webkit-linear-gradient(bottom, #c98a3a 0, #c98a3a 0.28rem, transparent 0.28rem); background-image: linear-gradient(0deg, #c98a3a 0, #c98a3a 0.28rem, transparent 0.28rem); }
html[data-skin="bread"] .lang-switch { border-radius: 0.4rem; box-shadow: 0 0 0 0.14rem #e0a850; }
html[data-skin="bread"] #stage-area {
    border-color: var(--ink);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.16rem #e0a850;
    outline: 0.12rem dashed #b9772e;
    outline-offset: 0.2rem;
  }
html[data-skin="bread"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.12rem dashed #d9a652;
    border-radius: 0.3rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="bread"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0.1rem;
    width: 8.5rem;
    height: 1.7rem;
    margin: 0 auto;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cpath d='M0 2L4 0 0 4 4 6 0 8 4 10 0 12 4 14 0 16 4 18 0 20H100L96 18 100 16 96 14 100 12 96 10 100 8 96 6 100 4 96 2 100 0H4Z' fill='%23f3d98a'/%3E%3Cpath d='M10 0L18 0 8 20 0 20Z M30 0L38 0 28 20 20 20Z M50 0L58 0 48 20 40 20Z M70 0L78 0 68 20 60 20Z M90 0L98 0 88 20 80 20Z' fill='%23e9c36a'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="bread"] .wing-btn {
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.14rem #fff6e2, 0 0 0 0.26rem #b9772e;
    background-image: -webkit-linear-gradient(225deg, #e9c98a 0, #e9c98a 0.55rem, transparent 0.56rem);
    background-image: linear-gradient(225deg, #e9c98a 0, #e9c98a 0.55rem, transparent 0.56rem);
  }
html[data-skin="bread"] .round-btn {
    background-image: -webkit-radial-gradient(50% 50%, circle, transparent 0, transparent 1.05rem, #f0cf8a 1.06rem, #f0cf8a 1.2rem, transparent 1.21rem);
    background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 1.05rem, #f0cf8a 1.06rem, #f0cf8a 1.2rem, transparent 1.21rem);
    box-shadow: 0 0 0 0.14rem #fff6e2, 0 0 0 0.26rem #b9772e;
  }
html[data-skin="bread"] .round-btn.solid { background-image: -webkit-radial-gradient(50% 50%, circle, transparent 0, transparent 1.05rem, #c98a3a 1.06rem, #c98a3a 1.2rem, transparent 1.21rem); background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 1.05rem, #c98a3a 1.06rem, #c98a3a 1.2rem, transparent 1.21rem); }
html[data-skin="bread"] .page-tab-btn { border-radius: 0.4rem; }
html[data-skin="bread"] .page-tab-btn.active {
    box-shadow: inset 0 0 0 0.12rem #f0cf8a;
    background-image: -webkit-linear-gradient(bottom, #e0a850 0, #e0a850 0.3rem, transparent 0.3rem);
    background-image: linear-gradient(0deg, #e0a850 0, #e0a850 0.3rem, transparent 0.3rem);
  }
html[data-skin="bread"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 0.5rem;
    background-image: -webkit-repeating-linear-gradient(bottom, transparent 0, transparent 1.15rem, rgba(160, 114, 47, 0.1) 1.15rem, rgba(160, 114, 47, 0.1) 1.2rem);
    background-image: repeating-linear-gradient(0deg, transparent 0, transparent 1.15rem, rgba(160, 114, 47, 0.1) 1.15rem, rgba(160, 114, 47, 0.1) 1.2rem);
    box-shadow: 0 0 0 0.16rem #e0a850;
  }
html[data-skin="bread"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.16rem #e0a850, 0 0 0 0.28rem #fff6e2;
  }
html[data-skin="bread"] .independent-color-box::after,
html[data-skin="bread"] .photo-modal-card::after,
html[data-skin="bread"] .boot-card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1rem;
    height: 1rem;
    background: -webkit-linear-gradient(225deg, #e0a850 0, #e0a850 0.5rem, #fff6e2 0.51rem, #fff6e2 100%);
    background: linear-gradient(225deg, #e0a850 0, #e0a850 0.5rem, #fff6e2 0.51rem, #fff6e2 100%);
    border-radius: 0 0.4rem 0 0;
    pointer-events: none;
  }
html[data-skin="bread"] .color-box-header {
    background: var(--silver);
    border-bottom-style: dashed;
    border-bottom-color: #b9772e;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="bread"] .btn-box-close { border-radius: 0.3rem; background: #fff6e2; box-shadow: inset 0 0 0 0.12rem #e0a850; }
html[data-skin="bread"] .hair-chip { border-radius: 0.6rem; box-shadow: 0 0 0 0.16rem #e0a850, 0 0 0 0.28rem #fff6e2; }
html[data-skin="bread"] .bg-option canvas { border-color: #e9cf9a; border-radius: 0.3rem; }
html[data-skin="bread"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #e0a850; }
html[data-skin="bread"] #photo-modal-view { background-color: rgba(58, 34, 14, 0.86); }
html[data-skin="bread"] .photo-modal-card,
html[data-skin="bread"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem #e0a850, 0 0 0 0.34rem #fff6e2;
  }
html[data-skin="bread"] .photo-modal-card::before,
html[data-skin="bread"] .boot-card::before {
    content: '';
    position: absolute;
    left: -0.8rem;
    top: -0.2rem;
    width: 3rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='20' viewBox='0 0 100 20'%3E%3Cpath d='M0 2L4 0 0 4 4 6 0 8 4 10 0 12 4 14 0 16 4 18 0 20H100L96 18 100 16 96 14 100 12 96 10 100 8 96 6 100 4 96 2 100 0H4Z' fill='%23f3d98a'/%3E%3Cpath d='M10 0L18 0 8 20 0 20Z M30 0L38 0 28 20 20 20Z M50 0L58 0 48 20 40 20Z M70 0L78 0 68 20 60 20Z M90 0L98 0 88 20 80 20Z' fill='%23e9c36a'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    -webkit-transform: rotate(-38deg);
    transform: rotate(-38deg);
    pointer-events: none;
  }
html[data-skin="bread"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="bread"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M8 20c4-6 8-6 12 0' fill='none' stroke='%23d3b077' stroke-width='1.6'/%3E%3Cpath d='M14 12v14' stroke='%23d3b077' stroke-width='1.6'/%3E%3Ccircle cx='60' cy='14' r='2.2' fill='%23d3b077'/%3E%3Ccircle cx='70' cy='22' r='1.4' fill='%23d3b077'/%3E%3Cpath d='M52 66c4-6 8-6 12 0' fill='none' stroke='%23d3b077' stroke-width='1.6'/%3E%3Cpath d='M58 58v14' stroke='%23d3b077' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='70' r='2.2' fill='%23d3b077'/%3E%3Ccircle cx='30' cy='78' r='1.4' fill='%23d3b077'/%3E%3C/svg%3E");
    background-size: 6rem 6rem;
  }
html[data-skin="bread"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5' fill='%23e0a850'/%3E%3Ccircle cx='8.4' cy='8.4' r='1.6' fill='%23f6dfa6'/%3E%3C/svg%3E"); }
html[data-skin="bread"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M3 8C1 4 6 1 10 3C14 1 19 4 17 8L17 18H3Z' fill='%23f6dfa6' stroke='%23a0722f' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="bread"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cellipse cx='10' cy='10' rx='7' ry='4' fill='%23fff6e2' stroke='%23a0722f' stroke-width='1.4' transform='rotate(-30 10 10)'/%3E%3C/svg%3E"); }
html[data-skin="pixel"] body {
    background-image: -webkit-linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%),
      -webkit-linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%);
    background-image: linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%),
      linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%);
    background-size: 1.2rem 1.2rem;
    background-position: 0 0, 0.6rem 0.6rem;
  }
html[data-skin="pixel"] #game-frame {
    border-color: var(--ink);
    background-image: -webkit-linear-gradient(bottom, transparent 0, transparent 0.55rem, rgba(95, 101, 140, 0.18) 0.55rem, rgba(95, 101, 140, 0.18) 0.6rem);
    background-image: linear-gradient(0deg, transparent 0, transparent 0.55rem, rgba(95, 101, 140, 0.18) 0.55rem, rgba(95, 101, 140, 0.18) 0.6rem);
    background-size: 100% 0.6rem;
    box-shadow: inset 0 0 0 0.2rem #5f658c, inset 0 0 0 0.3rem #f2efe3, inset 0 0 0 0.4rem #262a4a;
    outline: 0.3rem solid #262a4a;
    outline-offset: 0.2rem;
  }
html[data-skin="pixel"] #game-frame:not(.is-fullbleed) { border-radius: 0.3rem; }
html[data-skin="pixel"] #game-header {
    background: #262a4a;
    box-shadow: 0 0 0 0.3rem #262a4a, 0 0 0 0.4rem #5f658c;
  }
html[data-skin="pixel"] #game-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.62rem;
    height: 0.22rem;
    background: -webkit-repeating-linear-gradient(left, #5f658c 0, #5f658c 0.3rem, transparent 0.3rem, transparent 0.6rem);
    background: repeating-linear-gradient(90deg, #5f658c 0, #5f658c 0.3rem, transparent 0.3rem, transparent 0.6rem);
    pointer-events: none;
  }
html[data-skin="pixel"] .brand-title { color: #f2efe3; font-weight: 900; }
html[data-skin="pixel"] #game-header .pill-btn { border-color: #f2efe3; }
html[data-skin="pixel"] .pill-btn { border-radius: 0.2rem; box-shadow: inset 0 0 0 0.12rem #dedccd; }
html[data-skin="pixel"] .pill-btn.solid { background: #b33a5c; color: #ffffff; box-shadow: inset 0 0 0 0.12rem #d76a86; }
html[data-skin="pixel"] .pill-btn.solid:active { background: var(--paper); color: var(--ink); }
html[data-skin="pixel"] .lang-switch { border-radius: 0.2rem; box-shadow: 0 0 0 0.14rem #5f658c; border-color: #f2efe3; }
html[data-skin="pixel"] .lang-option.active { background: #2f7a76; color: #ffffff; }
html[data-skin="pixel"] #stage-area {
    border-color: var(--ink);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.16rem #f2efe3;
    outline: 0.12rem solid #5f658c;
    outline-offset: 0.2rem;
  }
html[data-skin="pixel"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.8rem;
    right: 0.3rem;
    bottom: 0.3rem;
    background:
      -webkit-linear-gradient(#262a4a, #262a4a) left top / 1.2rem 0.14rem no-repeat,
      -webkit-linear-gradient(#262a4a, #262a4a) left top / 0.14rem 1.2rem no-repeat,
      -webkit-linear-gradient(#262a4a, #262a4a) right top / 1.2rem 0.14rem no-repeat,
      -webkit-linear-gradient(#262a4a, #262a4a) right top / 0.14rem 1.2rem no-repeat,
      -webkit-linear-gradient(#262a4a, #262a4a) left bottom / 1.2rem 0.14rem no-repeat,
      -webkit-linear-gradient(#262a4a, #262a4a) left bottom / 0.14rem 1.2rem no-repeat,
      -webkit-linear-gradient(#262a4a, #262a4a) right bottom / 1.2rem 0.14rem no-repeat,
      -webkit-linear-gradient(#262a4a, #262a4a) right bottom / 0.14rem 1.2rem no-repeat;
    background:
      linear-gradient(#262a4a, #262a4a) left top / 1.2rem 0.14rem no-repeat,
      linear-gradient(#262a4a, #262a4a) left top / 0.14rem 1.2rem no-repeat,
      linear-gradient(#262a4a, #262a4a) right top / 1.2rem 0.14rem no-repeat,
      linear-gradient(#262a4a, #262a4a) right top / 0.14rem 1.2rem no-repeat,
      linear-gradient(#262a4a, #262a4a) left bottom / 1.2rem 0.14rem no-repeat,
      linear-gradient(#262a4a, #262a4a) left bottom / 0.14rem 1.2rem no-repeat,
      linear-gradient(#262a4a, #262a4a) right bottom / 1.2rem 0.14rem no-repeat,
      linear-gradient(#262a4a, #262a4a) right bottom / 0.14rem 1.2rem no-repeat;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="pixel"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.5rem;
    background-color: #f2efe3;
    background-image: -webkit-linear-gradient(45deg, #262a4a 25%, transparent 25%, transparent 75%, #262a4a 75%),
      -webkit-linear-gradient(45deg, #262a4a 25%, transparent 25%, transparent 75%, #262a4a 75%);
    background-image: linear-gradient(45deg, #262a4a 25%, transparent 25%, transparent 75%, #262a4a 75%),
      linear-gradient(45deg, #262a4a 25%, transparent 25%, transparent 75%, #262a4a 75%);
    background-size: 0.5rem 0.5rem;
    background-position: 0 0, 0.25rem 0.25rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="pixel"] .wing-btn {
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.14rem #f2efe3, 0 0 0 0.26rem #262a4a;
  }
html[data-skin="pixel"] .round-btn {
    border-radius: 0.55rem;
    box-shadow: 0 0 0 0.14rem #f2efe3, 0 0 0 0.26rem #262a4a;
  }
html[data-skin="pixel"] .round-btn.solid { background: #b33a5c; color: #ffffff; border-color: #262a4a; }
html[data-skin="pixel"] .round-btn.solid:active { background: var(--paper); color: var(--ink); }
html[data-skin="pixel"] .page-tab-btn { border-radius: 0.2rem; }
html[data-skin="pixel"] .page-tab-btn.active { background: var(--silver); box-shadow: inset 0 0 0 0.12rem #f2efe3, inset 0 -0.3rem 0 0 #3f8f8a; }
html[data-skin="pixel"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 0.2rem;
    background-image: -webkit-linear-gradient(left, rgba(95, 101, 140, 0.06) 0, rgba(95, 101, 140, 0.06) 0.06rem, transparent 0.06rem),
      -webkit-linear-gradient(bottom, rgba(95, 101, 140, 0.06) 0, rgba(95, 101, 140, 0.06) 0.06rem, transparent 0.06rem);
    background-image: linear-gradient(90deg, rgba(95, 101, 140, 0.06) 0, rgba(95, 101, 140, 0.06) 0.06rem, transparent 0.06rem),
      linear-gradient(0deg, rgba(95, 101, 140, 0.06) 0, rgba(95, 101, 140, 0.06) 0.06rem, transparent 0.06rem);
    background-size: 1.2rem 1.2rem;
    box-shadow: 0 0 0 0.16rem #f2efe3, 0 0 0 0.26rem #5f658c;
  }
html[data-skin="pixel"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.16rem #f2efe3, 0 0 0 0.28rem #262a4a;
  }
html[data-skin="pixel"] .color-box-header {
    background: #262a4a;
    color: #f2efe3;
    border-bottom-color: #5f658c;
    box-shadow: 0 0 0 0.3rem #262a4a;
  }
html[data-skin="pixel"] .btn-box-close { color: #f2efe3; border-radius: 0.15rem; box-shadow: inset 0 0 0 0.12rem #5f658c; }
html[data-skin="pixel"] .hair-chip { border-radius: 0.3rem; box-shadow: 0 0 0 0.16rem #f2efe3, 0 0 0 0.28rem #262a4a; }
html[data-skin="pixel"] .bg-option canvas { border-color: #dedccd; border-radius: 0.15rem; }
html[data-skin="pixel"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #3f8f8a; }
html[data-skin="pixel"] #photo-modal-view { background-color: rgba(20, 22, 44, 0.86); }
html[data-skin="pixel"] .photo-modal-card,
html[data-skin="pixel"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.2rem #f2efe3, 0 0 0 0.34rem #262a4a;
  }
html[data-skin="pixel"] .photo-modal-card::before,
html[data-skin="pixel"] .boot-card::before {
    content: '';
    position: absolute;
    right: 0.3rem;
    top: 0.3rem;
    width: 3.2rem;
    height: 0.5rem;
    background:
      -webkit-linear-gradient(#b33a5c, #b33a5c) left top / 0.5rem 0.5rem no-repeat,
      -webkit-linear-gradient(#3f8f8a, #3f8f8a) 1.35rem top / 0.5rem 0.5rem no-repeat,
      -webkit-linear-gradient(#e0b84a, #e0b84a) right top / 0.5rem 0.5rem no-repeat;
    background:
      linear-gradient(#b33a5c, #b33a5c) left top / 0.5rem 0.5rem no-repeat,
      linear-gradient(#3f8f8a, #3f8f8a) 1.35rem top / 0.5rem 0.5rem no-repeat,
      linear-gradient(#e0b84a, #e0b84a) right top / 0.5rem 0.5rem no-repeat;
    pointer-events: none;
  }
html[data-skin="pixel"] .photo-modal-card,
html[data-skin="pixel"] .boot-card { position: relative; }
html[data-skin="pixel"] #modal-photo-img { border-radius: 0; }
html[data-skin="pixel"] #boot-box {
    background-image: -webkit-linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%),
      -webkit-linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%);
    background-image: linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%),
      linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%);
    background-size: 1.2rem 1.2rem;
    background-position: 0 0, 0.6rem 0.6rem;
  }
html[data-skin="pixel"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='1' y='1' width='8' height='8' fill='%23b33a5c'/%3E%3Crect x='1' y='1' width='3' height='3' fill='%23d76a86'/%3E%3C/svg%3E"); }
html[data-skin="pixel"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Crect x='1' y='1' width='8' height='8' fill='%233f8f8a'/%3E%3Crect x='1' y='1' width='3' height='3' fill='%237cc2bd'/%3E%3C/svg%3E"); }
html[data-skin="desktop"] body {
    background-image: -webkit-linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%),
      -webkit-linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%);
    background-image: linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%),
      linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%);
    background-size: 0.5rem 0.5rem;
    background-position: 0 0, 0.25rem 0.25rem;
  }
html[data-skin="desktop"] body::before {
    content: '';
    position: fixed;
    left: 1rem;
    top: 1rem;
    width: 4rem;
    height: 15rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='64' height='240' viewBox='0 0 64 240'%3E%3Cpath d='M8 14h18l4 5h26v30H8Z' fill='%23f3cf5b'/%3E%3Cpath d='M8 24h48v25H8Z' fill='%23f7dd86'/%3E%3Cpath d='M8 14h18l4 5h-22Z' fill='%23d6a92c'/%3E%3Crect x='10' y='56' width='44' height='6' rx='1' fill='%23ffffff'/%3E%3Crect x='18' y='65' width='28' height='4' fill='%23ffffff'/%3E%3Cpath d='M14 88h26l10 10v30H14Z' fill='%23ffffff' stroke='%2314213d' stroke-width='2'/%3E%3Cpath d='M40 88v10h10' fill='%23dedbd0' stroke='%2314213d' stroke-width='2'/%3E%3Cpath d='M20 106h24M20 112h24M20 118h18' stroke='%23566478' stroke-width='2'/%3E%3Crect x='10' y='134' width='44' height='6' rx='1' fill='%23ffffff'/%3E%3Crect x='18' y='143' width='28' height='4' fill='%23ffffff'/%3E%3Crect x='12' y='168' width='40' height='28' fill='%23dedbd0' stroke='%2314213d' stroke-width='2'/%3E%3Crect x='17' y='173' width='30' height='18' fill='%234a6fc0'/%3E%3Crect x='24' y='198' width='16' height='5' fill='%23dedbd0' stroke='%2314213d' stroke-width='2'/%3E%3Crect x='10' y='210' width='44' height='6' rx='1' fill='%23ffffff'/%3E%3Crect x='18' y='219' width='28' height='4' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat left top / 4rem 15rem;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="desktop"] body::after {
    content: '';
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.4rem;
    background-color: #dedbd0;
    background-image: -webkit-linear-gradient(#ffffff, #ffffff), url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='400' height='24' viewBox='0 0 400 24'%3E%3Crect x='6' y='5' width='56' height='16' fill='%23f1efe7' stroke='%2314213d' stroke-width='1.4'/%3E%3Crect x='12' y='9' width='8' height='8' fill='%23c0463a'/%3E%3Crect x='22' y='9' width='8' height='8' fill='%233f8f5a'/%3E%3Crect x='12' y='9' width='3' height='3' fill='%23f3cf5b'/%3E%3Crect x='34' y='10' width='22' height='3' fill='%2314213d'/%3E%3Crect x='34' y='15' width='16' height='2' fill='%23566478'/%3E%3Crect x='72' y='5' width='90' height='16' fill='%23f1efe7' stroke='%239aa6bd' stroke-width='1.4'/%3E%3C/svg%3E");
    background-image: linear-gradient(#ffffff, #ffffff), url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='400' height='24' viewBox='0 0 400 24'%3E%3Crect x='6' y='5' width='56' height='16' fill='%23f1efe7' stroke='%2314213d' stroke-width='1.4'/%3E%3Crect x='12' y='9' width='8' height='8' fill='%23c0463a'/%3E%3Crect x='22' y='9' width='8' height='8' fill='%233f8f5a'/%3E%3Crect x='12' y='9' width='3' height='3' fill='%23f3cf5b'/%3E%3Crect x='34' y='10' width='22' height='3' fill='%2314213d'/%3E%3Crect x='34' y='15' width='16' height='2' fill='%23566478'/%3E%3Crect x='72' y='5' width='90' height='16' fill='%23f1efe7' stroke='%239aa6bd' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left top, left top;
    background-size: 100% 0.12rem, auto 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="desktop"] #game-frame {
    border-color: var(--ink);
    background-image: -webkit-linear-gradient(45deg, rgba(154, 166, 189, 0.16) 25%, transparent 25%, transparent 75%, rgba(154, 166, 189, 0.16) 75%),
      -webkit-linear-gradient(45deg, rgba(154, 166, 189, 0.16) 25%, transparent 25%, transparent 75%, rgba(154, 166, 189, 0.16) 75%);
    background-image: linear-gradient(45deg, rgba(154, 166, 189, 0.16) 25%, transparent 25%, transparent 75%, rgba(154, 166, 189, 0.16) 75%),
      linear-gradient(45deg, rgba(154, 166, 189, 0.16) 25%, transparent 25%, transparent 75%, rgba(154, 166, 189, 0.16) 75%);
    background-size: 0.5rem 0.5rem;
    background-position: 0 0, 0.25rem 0.25rem;
    box-shadow: inset 0 0 0 0.2rem #23418c, inset 0 0 0 0.3rem #f1efe7, inset 0 0 0 0.4rem #9aa6bd;
    outline: 0.3rem solid #dedbd0;
    outline-offset: 0.18rem;
  }
html[data-skin="desktop"] #game-frame:not(.is-fullbleed) { border-radius: 0.2rem; }
html[data-skin="desktop"] #game-header {
    background-color: #23418c;
    background-image: -webkit-repeating-linear-gradient(left, transparent 0, transparent 0.3rem, rgba(255, 255, 255, 0.08) 0.3rem, rgba(255, 255, 255, 0.08) 0.6rem);
    background-image: repeating-linear-gradient(90deg, transparent 0, transparent 0.3rem, rgba(255, 255, 255, 0.08) 0.3rem, rgba(255, 255, 255, 0.08) 0.6rem);
    box-shadow: 0 0 0 0.3rem #23418c, 0 0 0 0.4rem #f1efe7;
  }
html[data-skin="desktop"] .brand-title { color: #ffffff; font-weight: 900; }
html[data-skin="desktop"] #game-header .pill-btn,
html[data-skin="desktop"] #game-header .lang-switch { border-color: #f1efe7; }
html[data-skin="desktop"] .pill-btn { border-radius: 0.15rem; box-shadow: inset 0 0 0 0.1rem #ffffff, inset 0 0 0 0.2rem #c9cfdb; }
html[data-skin="desktop"] .pill-btn.solid { background: #23418c; color: #ffffff; box-shadow: inset 0 0 0 0.1rem #4a6fc0; }
html[data-skin="desktop"] .pill-btn.solid:active { background: var(--paper); color: var(--ink); }
html[data-skin="desktop"] .lang-switch { border-radius: 0.15rem; }
html[data-skin="desktop"] .lang-option.active { background: #4a6fc0; color: #ffffff; }
html[data-skin="desktop"] #stage-area {
    border-color: var(--ink);
    border-radius: 0;
    box-shadow: 0 0 0 0.16rem #9aa6bd;
  }
html[data-skin="desktop"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.7rem;
    top: 0.8rem;
    right: 0.7rem;
    bottom: 0.7rem;
    border: 0.1rem dotted rgba(20, 33, 61, 0.55);
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="desktop"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.5rem;
    background:
      -webkit-linear-gradient(#f1efe7, #f1efe7) right 0.1rem top 0.1rem / 0.3rem 0.3rem no-repeat,
      -webkit-linear-gradient(#f1efe7, #f1efe7) right 0.5rem top 0.1rem / 0.3rem 0.3rem no-repeat,
      -webkit-linear-gradient(#f1efe7, #f1efe7) right 0.9rem top 0.1rem / 0.3rem 0.3rem no-repeat,
      #23418c;
    background:
      linear-gradient(#f1efe7, #f1efe7) right 0.1rem top 0.1rem / 0.3rem 0.3rem no-repeat,
      linear-gradient(#f1efe7, #f1efe7) right 0.5rem top 0.1rem / 0.3rem 0.3rem no-repeat,
      linear-gradient(#f1efe7, #f1efe7) right 0.9rem top 0.1rem / 0.3rem 0.3rem no-repeat,
      #23418c;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="desktop"] .wing-btn {
    border-radius: 0.15rem;
    box-shadow: 0 0 0 0.14rem #f1efe7, 0 0 0 0.26rem #14213d;
  }
html[data-skin="desktop"] .round-btn {
    border-radius: 0.3rem;
    box-shadow: 0 0 0 0.14rem #f1efe7, 0 0 0 0.26rem #14213d;
  }
html[data-skin="desktop"] .round-btn.solid { background: #23418c; color: #ffffff; }
html[data-skin="desktop"] .round-btn.solid:active { background: var(--paper); color: var(--ink); }
html[data-skin="desktop"] .page-tab-btn { border-radius: 0.15rem; }
html[data-skin="desktop"] .page-tab-btn.active {
    background-image: -webkit-linear-gradient(top, #23418c 0, #23418c 0.3rem, transparent 0.3rem);
    background-image: linear-gradient(180deg, #23418c 0, #23418c 0.3rem, transparent 0.3rem);
    box-shadow: inset 0 0 0 0.12rem #ffffff;
  }
html[data-skin="desktop"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 0;
    box-shadow: 0 0 0 0.16rem #9aa6bd;
  }
html[data-skin="desktop"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 0;
    box-shadow: 0 0 0 0.16rem #c9cfdb, 0 0 0 0.28rem #14213d;
  }
html[data-skin="desktop"] .color-box-header {
    background: #23418c;
    color: #ffffff;
    border-bottom-color: #4a6fc0;
    box-shadow: 0 0 0 0.3rem #23418c;
  }
html[data-skin="desktop"] .btn-box-close { color: var(--ink); background: #dedbd0; border-radius: 0.1rem; box-shadow: inset 0 0 0 0.1rem #ffffff, 0 0 0 0.1rem #14213d; }
html[data-skin="desktop"] .hair-chip { border-radius: 0.2rem; box-shadow: 0 0 0 0.16rem #c9cfdb, 0 0 0 0.28rem #14213d; }
html[data-skin="desktop"] .bg-option canvas { border-color: #c9cfdb; border-radius: 0; }
html[data-skin="desktop"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #4a6fc0; }
html[data-skin="desktop"] #photo-modal-view { background-color: rgba(14, 44, 48, 0.86); }
html[data-skin="desktop"] .photo-modal-card,
html[data-skin="desktop"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 0;
    box-shadow: 0 0 0 0.2rem #c9cfdb, 0 0 0 0.34rem #14213d;
  }
html[data-skin="desktop"] .photo-modal-card::before,
html[data-skin="desktop"] .boot-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.8rem;
    background:
      -webkit-linear-gradient(#f1efe7, #f1efe7) right 0.2rem top 0.2rem / 0.4rem 0.4rem no-repeat,
      -webkit-linear-gradient(#f1efe7, #f1efe7) right 0.8rem top 0.2rem / 0.4rem 0.4rem no-repeat,
      -webkit-linear-gradient(#f1efe7, #f1efe7) right 1.4rem top 0.2rem / 0.4rem 0.4rem no-repeat,
      #23418c;
    background:
      linear-gradient(#f1efe7, #f1efe7) right 0.2rem top 0.2rem / 0.4rem 0.4rem no-repeat,
      linear-gradient(#f1efe7, #f1efe7) right 0.8rem top 0.2rem / 0.4rem 0.4rem no-repeat,
      linear-gradient(#f1efe7, #f1efe7) right 1.4rem top 0.2rem / 0.4rem 0.4rem no-repeat,
      #23418c;
    pointer-events: none;
  }
html[data-skin="desktop"] #modal-photo-img { border-radius: 0; }
html[data-skin="desktop"] #boot-box {
    background-image: -webkit-linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%),
      -webkit-linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%);
    background-image: linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%),
      linear-gradient(45deg, var(--page-dot) 25%, transparent 25%, transparent 75%, var(--page-dot) 75%);
    background-size: 0.5rem 0.5rem;
    background-position: 0 0, 0.25rem 0.25rem;
  }
html[data-skin="desktop"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M2 1v15l4-3.4 3 6.4 2.6-1.2-3-6.2H14Z' fill='%23ffffff' stroke='%2314213d' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="desktop"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='1.5' y='3' width='17' height='14' fill='%23f1efe7' stroke='%2314213d' stroke-width='1.4'/%3E%3Crect x='1.5' y='3' width='17' height='4' fill='%2323418c'/%3E%3C/svg%3E"); }
html[data-skin="starry"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath d='M20 14l1.6 4.4 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6Z' fill='%239fb4ff'/%3E%3Ccircle cx='76' cy='30' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='122' cy='18' r='1.2' fill='%23b9a4ff'/%3E%3Ccircle cx='140' cy='70' r='1.8' fill='%23ffffff'/%3E%3Cpath d='M100 96l1.2 3.2 3.2 1.2-3.2 1.2-1.2 3.2-1.2-3.2-3.2-1.2 3.2-1.2Z' fill='%23ffd86b'/%3E%3Ccircle cx='36' cy='84' r='1.4' fill='%23ffffff'/%3E%3Ccircle cx='64' cy='130' r='2' fill='%239fb4ff'/%3E%3Ccircle cx='18' cy='142' r='1.2' fill='%23ffffff'/%3E%3Ccircle cx='128' cy='142' r='1.4' fill='%23b9a4ff'/%3E%3Ccircle cx='90' cy='62' r='1' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 10rem 10rem;
  }
html[data-skin="starry"] body::before {
    content: '';
    position: fixed;
    right: 1.5rem;
    top: 1.5rem;
    width: 6rem;
    height: 6rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M62 8A42 42 0 1 0 92 66 34 34 0 1 1 62 8Z' fill='%23ffd86b'/%3E%3Cpath d='M62 8A42 42 0 0 0 36 22 36 36 0 0 1 62 8Z' fill='%23fff1b5'/%3E%3Ccircle cx='22' cy='20' r='2' fill='%23ffffff'/%3E%3Ccircle cx='88' cy='88' r='1.6' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="starry"] body::after {
    content: '';
    position: fixed;
    left: 1.2rem;
    bottom: 2.4rem;
    width: 6rem;
    height: 5rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='84' viewBox='0 0 100 84'%3E%3Cpath d='M10 70L34 44 52 56 74 18 92 30' fill='none' stroke='%236c77c6' stroke-width='1.4' stroke-dasharray='3 3'/%3E%3Cpath d='M10 64l2.4 5.6 5.6 2.4-5.6 2.4-2.4 5.6-2.4-5.6-5.6-2.4 5.6-2.4Z' fill='%23ffd86b'/%3E%3Ccircle cx='34' cy='44' r='3' fill='%23ffffff'/%3E%3Ccircle cx='52' cy='56' r='2.4' fill='%239fb4ff'/%3E%3Ccircle cx='74' cy='18' r='3.4' fill='%23ffffff'/%3E%3Ccircle cx='92' cy='30' r='2.4' fill='%23b9a4ff'/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="starry"] #game-frame {
    border-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Ccircle cx='14' cy='16' r='1.2' fill='%234a56a8'/%3E%3Ccircle cx='60' cy='30' r='1' fill='%234a56a8'/%3E%3Ccircle cx='36' cy='70' r='1.2' fill='%234a56a8'/%3E%3Ccircle cx='84' cy='82' r='1' fill='%234a56a8'/%3E%3Cpath d='M74 10l1 2.6 2.6 1-2.6 1-1 2.6-1-2.6-2.6-1 2.6-1Z' fill='%234a56a8'/%3E%3C/svg%3E");
    background-size: 6rem 6rem;
    box-shadow: inset 0 0 0 0.18rem #ffd86b, inset 0 0 0 0.26rem #1b2155, inset 0 0 0 0.38rem #4a56a8;
    outline: 0.22rem solid #2b3377;
    outline-offset: 0.18rem;
  }
html[data-skin="starry"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="starry"] #game-header {
    background: var(--silver);
    border-radius: 0.8rem;
    box-shadow: 0 0 0 0.3rem var(--silver), 0 0 0 0.4rem #ffd86b;
  }
html[data-skin="starry"] #game-header::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -0.38rem;
    height: 0.3rem;
    background: -webkit-radial-gradient(50% 50%, circle, #ffd86b 0, #ffd86b 0.09rem, transparent 0.11rem) repeat-x;
    background: radial-gradient(circle at 50% 50%, #ffd86b 0, #ffd86b 0.09rem, transparent 0.11rem) repeat-x;
    background-size: 1rem 0.3rem;
    pointer-events: none;
  }
html[data-skin="starry"] .brand-title { font-weight: 900; }
html[data-skin="starry"] .pill-btn { border-radius: 1rem; box-shadow: inset 0 0 0 0.14rem #4a56a8; }
html[data-skin="starry"] .pill-btn.solid { box-shadow: inset 0 0 0 0.14rem #9fb4ff; }
html[data-skin="starry"] .lang-switch { box-shadow: 0 0 0 0.14rem #4a56a8; }
html[data-skin="starry"] #stage-area {
    border-color: var(--ink);
    border-radius: 0.8rem;
    box-shadow: 0 0 0 0.16rem #4a56a8;
    outline: 0.12rem dashed #ffd86b;
    outline-offset: 0.2rem;
  }
html[data-skin="starry"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.1rem dotted #6c77c6;
    border-radius: 0.55rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="starry"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: 0.3rem;
    height: 2.2rem;
    background:
      url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M62 8A42 42 0 1 0 92 66 34 34 0 1 1 62 8Z' fill='%23ffd86b'/%3E%3Cpath d='M62 8A42 42 0 0 0 36 22 36 36 0 0 1 62 8Z' fill='%23fff1b5'/%3E%3C/svg%3E") no-repeat right 0.4rem top 0.1rem / 2.3rem 2.3rem,
      url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cpath d='M4 22L28 10 52 24 78 8 114 20' fill='none' stroke='%236c77c6' stroke-width='1.2' stroke-dasharray='3 3'/%3E%3Cpath d='M28 3l1.6 4.2 4.2 1.6-4.2 1.6-1.6 4.2-1.6-4.2-4.2-1.6 4.2-1.6Z' fill='%23ffd86b'/%3E%3Ccircle cx='4' cy='22' r='2.2' fill='%23ffffff'/%3E%3Ccircle cx='52' cy='24' r='2' fill='%239fb4ff'/%3E%3Ccircle cx='78' cy='8' r='2.6' fill='%23ffffff'/%3E%3Ccircle cx='114' cy='20' r='2' fill='%23b9a4ff'/%3E%3C/svg%3E") repeat-x left top / 7.5rem 2.2rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="starry"] .wing-btn {
    border-radius: 0.7rem;
    box-shadow: 0 0 0 0.14rem #1b2155, 0 0 0 0.26rem #ffd86b;
  }
html[data-skin="starry"] .round-btn { box-shadow: 0 0 0 0.14rem #1b2155, 0 0 0 0.26rem #ffd86b; }
html[data-skin="starry"] .page-tab-btn { border-radius: 0.6rem; }
html[data-skin="starry"] .page-tab-btn.active { box-shadow: inset 0 0 0 0.12rem #ffd86b; }
html[data-skin="starry"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 0.8rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='10' cy='12' r='1.2' fill='%23e0e4f6'/%3E%3Ccircle cx='34' cy='30' r='1.2' fill='%23e0e4f6'/%3E%3Cpath d='M38 8l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8Z' fill='%23e0e4f6'/%3E%3C/svg%3E");
    background-size: 3rem 3rem;
    box-shadow: 0 0 0 0.16rem #ffd86b;
  }
html[data-skin="starry"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 0.8rem;
    box-shadow: 0 0 0 0.16rem #ffd86b, 0 0 0 0.28rem #1b2155;
  }
html[data-skin="starry"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #6c77c6;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="starry"] .btn-box-close { border-radius: 50%; box-shadow: inset 0 0 0 0.12rem #6c77c6; }
html[data-skin="starry"] .hair-chip { box-shadow: 0 0 0 0.16rem #ffd86b, 0 0 0 0.28rem #1b2155; }
html[data-skin="starry"] .bg-option canvas { border-color: #4a56a8; border-radius: 0.5rem; }
html[data-skin="starry"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #ffd86b; }
html[data-skin="starry"] #photo-modal-view { background-color: rgba(4, 6, 24, 0.9); }
html[data-skin="starry"] .photo-modal-card,
html[data-skin="starry"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.2rem #ffd86b, 0 0 0 0.34rem #1b2155;
  }
html[data-skin="starry"] .photo-modal-card::before,
html[data-skin="starry"] .boot-card::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: -0.7rem;
    width: 1.7rem;
    height: 1.7rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 2l5 13 13 5-13 5-5 13-5-13-13-5 13-5Z' fill='%23ffd86b' stroke='%231b2155' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }
html[data-skin="starry"] #modal-photo-img { border-radius: 0.5rem; }
html[data-skin="starry"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath d='M20 14l1.6 4.4 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6Z' fill='%239fb4ff'/%3E%3Ccircle cx='76' cy='30' r='1.6' fill='%23ffffff'/%3E%3Ccircle cx='122' cy='18' r='1.2' fill='%23b9a4ff'/%3E%3Ccircle cx='140' cy='70' r='1.8' fill='%23ffffff'/%3E%3Ccircle cx='36' cy='84' r='1.4' fill='%23ffffff'/%3E%3Ccircle cx='64' cy='130' r='2' fill='%239fb4ff'/%3E%3C/svg%3E");
    background-size: 10rem 10rem;
  }
html[data-skin="starry"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.4 7.6L20 10l-7.6 2.4L10 20l-2.4-7.6L0 10l7.6-2.4Z' fill='%23ffd86b'/%3E%3C/svg%3E"); }
html[data-skin="starry"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2l2.4 5.2 5.6.6-4.2 3.8 1.2 5.6L10 14.4 5 17.2l1.2-5.6L2 7.8l5.6-.6Z' fill='%239fb4ff'/%3E%3C/svg%3E"); }
html[data-skin="starry"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3.6' fill='%23ffffff'/%3E%3Ccircle cx='10' cy='10' r='6.4' fill='none' stroke='%23b9a4ff' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="sakura"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cellipse cx='20' cy='22' rx='6' ry='3.4' transform='rotate(35 20 22)' fill='%23f4b6c9'/%3E%3Cellipse cx='88' cy='14' rx='5' ry='2.8' transform='rotate(-30 88 14)' fill='%23fbd3e0'/%3E%3Cellipse cx='122' cy='60' rx='6' ry='3.4' transform='rotate(60 122 60)' fill='%23f4b6c9'/%3E%3Cellipse cx='56' cy='72' rx='5' ry='2.8' transform='rotate(10 56 72)' fill='%23fbd3e0'/%3E%3Cellipse cx='24' cy='108' rx='6' ry='3.4' transform='rotate(-50 24 108)' fill='%23fbd3e0'/%3E%3Cellipse cx='100' cy='118' rx='5' ry='2.8' transform='rotate(40 100 118)' fill='%23f4b6c9'/%3E%3Cpath d='M70 40q6-6 12 0-6 6-12 0Z' fill='%23b7d6a6'/%3E%3Cpath d='M8 70q6-6 12 0-6 6-12 0Z' fill='%23b7d6a6'/%3E%3Cpath d='M120 100q6-6 12 0-6 6-12 0Z' fill='%23b7d6a6'/%3E%3C/svg%3E");
    background-size: 8.75rem 8.75rem;
  }
html[data-skin="sakura"] body::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 9rem;
    height: 6.5rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='180' height='130' viewBox='0 0 180 130'%3E%3Cpath d='M0 14C40 20 70 46 98 84' fill='none' stroke='%238a6a55' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M40 24C52 12 66 8 82 10' fill='none' stroke='%238a6a55' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='22' r='9' fill='%23fbd3e0'/%3E%3Ccircle cx='30' cy='22' r='3.4' fill='%23e0719a'/%3E%3Ccircle cx='66' cy='46' r='10' fill='%23f4a7bf'/%3E%3Ccircle cx='66' cy='46' r='3.6' fill='%23e0719a'/%3E%3Ccircle cx='82' cy='10' r='8' fill='%23fbd3e0'/%3E%3Ccircle cx='82' cy='10' r='3' fill='%23e0719a'/%3E%3Ccircle cx='98' cy='84' r='9' fill='%23f4a7bf'/%3E%3Ccircle cx='98' cy='84' r='3.2' fill='%23e0719a'/%3E%3Cpath d='M48 36q8-8 14 0-8 8-14 0Z' fill='%239ac487'/%3E%3Cpath d='M84 62q8-8 14 0-8 8-14 0Z' fill='%239ac487'/%3E%3C/svg%3E") no-repeat left top / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="sakura"] body::after {
    content: '';
    position: fixed;
    right: 0;
    bottom: 0;
    width: 9rem;
    height: 6.5rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='180' height='130' viewBox='0 0 180 130'%3E%3Cg transform='translate(180 130) scale(-1 -1)'%3E%3Cpath d='M0 14C40 20 70 46 98 84' fill='none' stroke='%238a6a55' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M40 24C52 12 66 8 82 10' fill='none' stroke='%238a6a55' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='30' cy='22' r='9' fill='%23fbd3e0'/%3E%3Ccircle cx='30' cy='22' r='3.4' fill='%23e0719a'/%3E%3Ccircle cx='66' cy='46' r='10' fill='%23f4a7bf'/%3E%3Ccircle cx='66' cy='46' r='3.6' fill='%23e0719a'/%3E%3Ccircle cx='82' cy='10' r='8' fill='%23fbd3e0'/%3E%3Ccircle cx='82' cy='10' r='3' fill='%23e0719a'/%3E%3Cpath d='M48 36q8-8 14 0-8 8-14 0Z' fill='%239ac487'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="sakura"] #game-frame {
    border-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cellipse cx='20' cy='24' rx='4.4' ry='2.4' transform='rotate(35 20 24)' fill='%23fde4ec'/%3E%3Cellipse cx='72' cy='62' rx='4.4' ry='2.4' transform='rotate(-40 72 62)' fill='%23fde4ec'/%3E%3Cpath d='M60 18q5-5 10 0-5 5-10 0Z' fill='%23e6f1dd'/%3E%3Cpath d='M14 78q5-5 10 0-5 5-10 0Z' fill='%23e6f1dd'/%3E%3C/svg%3E");
    background-size: 6.25rem 6.25rem;
    box-shadow: inset 0 0 0 0.18rem #f4a7bf, inset 0 0 0 0.3rem #fffaf6, inset 0 0 0 0.4rem #cfe3c5;
    outline: 0.22rem solid #cfe3c5;
    outline-offset: 0.18rem;
  }
html[data-skin="sakura"] #game-frame:not(.is-fullbleed) { border-radius: 1.2rem; }
html[data-skin="sakura"] #game-header {
    background: var(--silver);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.3rem var(--silver), 0 0 0 0.4rem #f4a7bf;
  }
html[data-skin="sakura"] #game-header::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -0.62rem;
    height: 0.7rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cpath d='M2 8q6-6 12 0-6 6-12 0Z' fill='%239ac487'/%3E%3Cpath d='M46 8q6-6 12 0-6 6-12 0Z' fill='%239ac487'/%3E%3Ccircle cx='30' cy='8' r='5.4' fill='%23f4a7bf'/%3E%3Ccircle cx='30' cy='8' r='2' fill='%23e0719a'/%3E%3Ccircle cx='19' cy='8' r='1.4' fill='%23fbd3e0'/%3E%3Ccircle cx='41' cy='8' r='1.4' fill='%23fbd3e0'/%3E%3C/svg%3E") repeat-x left center / 3.75rem 1rem;
    pointer-events: none;
  }
html[data-skin="sakura"] .brand-title { font-weight: 900; }
html[data-skin="sakura"] .pill-btn { box-shadow: inset 0 0 0 0.14rem #fbd3e0; }
html[data-skin="sakura"] .pill-btn.solid { box-shadow: inset 0 0 0 0.14rem #7fb069; }
html[data-skin="sakura"] .lang-switch { box-shadow: 0 0 0 0.14rem #fbd3e0; }
html[data-skin="sakura"] #stage-area {
    border-color: var(--ink);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.16rem #fbd3e0;
    outline: 0.12rem dashed #e0719a;
    outline-offset: 0.2rem;
  }
html[data-skin="sakura"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.12rem dashed #cfe3c5;
    border-radius: 0.7rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="sakura"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: 0.3rem;
    height: 2rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='140' height='36' viewBox='0 0 140 36'%3E%3Cpath d='M0 8C30 14 50 4 80 10S120 6 140 8' fill='none' stroke='%238a6a55' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M30 12L26 24 M92 10L98 24 M120 8L124 18' stroke='%238a6a55' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='26' cy='26' r='6' fill='%23fbd3e0'/%3E%3Ccircle cx='26' cy='26' r='2.2' fill='%23e0719a'/%3E%3Ccircle cx='98' cy='26' r='6.4' fill='%23f4a7bf'/%3E%3Ccircle cx='98' cy='26' r='2.4' fill='%23e0719a'/%3E%3Ccircle cx='60' cy='9' r='5' fill='%23fbd3e0'/%3E%3Ccircle cx='60' cy='9' r='1.8' fill='%23e0719a'/%3E%3Ccircle cx='124' cy='19' r='4.6' fill='%23fbd3e0'/%3E%3Ccircle cx='124' cy='19' r='1.6' fill='%23e0719a'/%3E%3Cpath d='M42 12q6-6 10 0-6 6-10 0Z' fill='%237fb069'/%3E%3Cpath d='M76 12q6 6 10 0-6-6-10 0Z' fill='%237fb069'/%3E%3Cpath d='M8 10q4-6 9 0-4 6-9 0Z' fill='%237fb069'/%3E%3C/svg%3E") repeat-x left top / 8.75rem 2.25rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="sakura"] .wing-btn {
    border-radius: 0.8rem;
    box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #f4a7bf;
  }
html[data-skin="sakura"] .round-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #f4a7bf; }
html[data-skin="sakura"] .round-btn.solid { box-shadow: inset 0 0 0 0.14rem #7fb069, 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #f4a7bf; }
html[data-skin="sakura"] .page-tab-btn { border-radius: 0.7rem; }
html[data-skin="sakura"] .page-tab-btn.active { box-shadow: inset 0 0 0 0.12rem #f4a7bf; }
html[data-skin="sakura"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cellipse cx='16' cy='18' rx='4' ry='2.2' transform='rotate(35 16 18)' fill='%23fdeaf0'/%3E%3Cellipse cx='58' cy='56' rx='4' ry='2.2' transform='rotate(-40 58 56)' fill='%23fdeaf0'/%3E%3Cpath d='M50 14q5-5 9 0-5 5-9 0Z' fill='%23edf5e6'/%3E%3Cpath d='M12 62q5-5 9 0-5 5-9 0Z' fill='%23edf5e6'/%3E%3C/svg%3E");
    background-size: 5rem 5rem;
    box-shadow: 0 0 0 0.16rem #fbd3e0;
  }
html[data-skin="sakura"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.16rem #fbd3e0, 0 0 0 0.28rem #ffffff;
  }
html[data-skin="sakura"] .independent-color-box::before,
html[data-skin="sakura"] .photo-modal-card::before,
html[data-skin="sakura"] .boot-card::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: -0.75rem;
    width: 1.4rem;
    height: 1.4rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%23fbd3e0' stroke='%23e0719a' stroke-width='1.6'%3E%3Ccircle cx='20' cy='9' r='8'/%3E%3Ccircle cx='31' cy='17' r='8'/%3E%3Ccircle cx='27' cy='30' r='8'/%3E%3Ccircle cx='13' cy='30' r='8'/%3E%3Ccircle cx='9' cy='17' r='8'/%3E%3C/g%3E%3Ccircle cx='20' cy='21' r='6' fill='%23fbd3e0'/%3E%3Ccircle cx='20' cy='21' r='3' fill='%23e0719a'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }
html[data-skin="sakura"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #f4a7bf;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="sakura"] .btn-box-close { border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 0.12rem #f4a7bf; }
html[data-skin="sakura"] .hair-chip { box-shadow: 0 0 0 0.16rem #fbd3e0, 0 0 0 0.28rem #ffffff; }
html[data-skin="sakura"] .bg-option canvas { border-color: #fbd3e0; border-radius: 0.5rem; }
html[data-skin="sakura"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #f4a7bf; }
html[data-skin="sakura"] #photo-modal-view { background-color: rgba(30, 56, 38, 0.84); }
html[data-skin="sakura"] .photo-modal-card,
html[data-skin="sakura"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 1.2rem;
    box-shadow: 0 0 0 0.2rem #fbd3e0, 0 0 0 0.34rem #ffffff;
  }
html[data-skin="sakura"] .photo-modal-card::before,
html[data-skin="sakura"] .boot-card::before { left: -0.8rem; top: -0.8rem; width: 1.7rem; height: 1.7rem; }
html[data-skin="sakura"] #modal-photo-img { border-radius: 0.5rem; }
html[data-skin="sakura"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cellipse cx='20' cy='22' rx='6' ry='3.4' transform='rotate(35 20 22)' fill='%23f4b6c9'/%3E%3Cellipse cx='88' cy='14' rx='5' ry='2.8' transform='rotate(-30 88 14)' fill='%23fbd3e0'/%3E%3Cellipse cx='122' cy='60' rx='6' ry='3.4' transform='rotate(60 122 60)' fill='%23f4b6c9'/%3E%3Cellipse cx='24' cy='108' rx='6' ry='3.4' transform='rotate(-50 24 108)' fill='%23fbd3e0'/%3E%3Cpath d='M70 40q6-6 12 0-6 6-12 0Z' fill='%23b7d6a6'/%3E%3C/svg%3E");
    background-size: 8.75rem 8.75rem;
  }
html[data-skin="sakura"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2C16 4 18 12 10 18C2 12 4 4 10 2Z M10 2L10 6' fill='%23f4a7bf'/%3E%3Cpath d='M10 2L10 7' stroke='%23e0719a' stroke-width='1.2'/%3E%3C/svg%3E"); }
html[data-skin="sakura"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2C16 4 18 12 10 18C2 12 4 4 10 2Z' fill='%23fbd3e0' stroke='%23e0719a' stroke-width='1'/%3E%3C/svg%3E"); }
html[data-skin="sakura"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M3 17C3 8 9 3 18 3C18 12 12 17 3 17Z' fill='%237fb069'/%3E%3Cpath d='M3 17L14 7' stroke='%234f8a46' stroke-width='1.2'/%3E%3C/svg%3E"); }
html[data-skin="journal"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M10 12l8 2M60 30l7-3M96 18l6 4M30 70l8-1M80 84l7 3M104 108l6-3M12 104l6 3M50 112l7-2' stroke='%23c0a27a' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='40' cy='40' r='1.4' fill='%23c0a27a'/%3E%3Ccircle cx='100' cy='60' r='1.4' fill='%23c0a27a'/%3E%3Ccircle cx='20' cy='90' r='1.4' fill='%23c0a27a'/%3E%3Ccircle cx='76' cy='112' r='1.2' fill='%23b99a70'/%3E%3C/svg%3E");
    background-size: 7.5rem 7.5rem;
  }
html[data-skin="journal"] #game-frame {
    border-color: var(--ink);
    background-image: -webkit-linear-gradient(left, rgba(111, 183, 176, 0.2) 0, rgba(111, 183, 176, 0.2) 0.06rem, transparent 0.06rem),
      -webkit-linear-gradient(bottom, rgba(111, 183, 176, 0.2) 0, rgba(111, 183, 176, 0.2) 0.06rem, transparent 0.06rem);
    background-image: linear-gradient(90deg, rgba(111, 183, 176, 0.2) 0, rgba(111, 183, 176, 0.2) 0.06rem, transparent 0.06rem),
      linear-gradient(0deg, rgba(111, 183, 176, 0.2) 0, rgba(111, 183, 176, 0.2) 0.06rem, transparent 0.06rem);
    background-size: 1.2rem 1.2rem;
    box-shadow: inset 0 0 0 0.18rem #6fb7b0, inset 0 0 0 0.3rem #fbf7ee, inset 0 0 0 0.4rem #e3b04b;
    outline: 0.12rem dashed #3b3126;
    outline-offset: 0.2rem;
  }
html[data-skin="journal"] #game-frame:not(.is-fullbleed) { border-radius: 0.5rem; }
html[data-skin="journal"] #game-header {
    background-color: #fbf7ee;
    background-image: -webkit-repeating-linear-gradient(315deg, #d4ece8 0, #d4ece8 0.5rem, #fbf7ee 0.5rem, #fbf7ee 1rem);
    background-image: repeating-linear-gradient(135deg, #d4ece8 0, #d4ece8 0.5rem, #fbf7ee 0.5rem, #fbf7ee 1rem);
    border-radius: 0.3rem;
    box-shadow: 0 0 0 0.3rem #fbf7ee, 0 0 0 0.4rem #6fb7b0;
  }
html[data-skin="journal"] .brand-title { font-weight: 900; }
html[data-skin="journal"] .pill-btn {
    border-radius: 0.3rem;
    background-image: -webkit-radial-gradient(0.5rem 50%, circle, #cfb28b 0, #cfb28b 0.13rem, transparent 0.15rem);
    background-image: radial-gradient(circle at 0.5rem 50%, #cfb28b 0, #cfb28b 0.13rem, transparent 0.15rem);
  }
html[data-skin="journal"] .pill-btn.solid { background-image: -webkit-radial-gradient(0.5rem 50%, circle, #fbf7ee 0, #fbf7ee 0.13rem, transparent 0.15rem); background-image: radial-gradient(circle at 0.5rem 50%, #fbf7ee 0, #fbf7ee 0.13rem, transparent 0.15rem); }
html[data-skin="journal"] .lang-switch { border-radius: 0.3rem; box-shadow: 0 0 0 0.14rem #e3b04b; }
html[data-skin="journal"] #stage-area {
    border-color: var(--ink);
    border-radius: 0.3rem;
    box-shadow: 0 0 0 0.16rem #6fb7b0;
    outline: 0.12rem dashed #3b3126;
    outline-offset: 0.2rem;
  }
html[data-skin="journal"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.12rem dotted #e3b04b;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="journal"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: 0.3rem;
    height: 2rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='160' height='36' viewBox='0 0 160 36'%3E%3Cg stroke='%23ffffff' stroke-width='5' stroke-linejoin='round' fill='%23ffffff'%3E%3Cpath d='M20 5l3.4 7 7.6 1-5.6 5.2 1.4 7.6-6.8-3.8-6.8 3.8 1.4-7.6L9 13l7.6-1Z'/%3E%3Cpath d='M52 6h20l-4 8 4 8H52Z'/%3E%3Cpath d='M104 26C88 14 94 4 104 12 114 4 120 14 104 26Z'/%3E%3Ccircle cx='140' cy='15' r='9'/%3E%3C/g%3E%3Cpath d='M20 5l3.4 7 7.6 1-5.6 5.2 1.4 7.6-6.8-3.8-6.8 3.8 1.4-7.6L9 13l7.6-1Z' fill='%23e3b04b'/%3E%3Cpath d='M52 6h20l-4 8 4 8H52Z' fill='%23d9604f'/%3E%3Cpath d='M52 6v22' stroke='%233b3126' stroke-width='1.6'/%3E%3Cpath d='M104 26C88 14 94 4 104 12 114 4 120 14 104 26Z' fill='%236fb7b0'/%3E%3Ccircle cx='140' cy='15' r='9' fill='%23fbf7ee' stroke='%233b3126' stroke-width='1.4'/%3E%3Ccircle cx='140' cy='15' r='4' fill='%23e3b04b'/%3E%3C/svg%3E") repeat-x left top / 10rem 2.25rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="journal"] .wing-btn {
    border-radius: 0.3rem;
    box-shadow: 0 0 0 0.14rem #fbf7ee, 0 0 0 0.26rem #3b3126;
  }
html[data-skin="journal"] .round-btn { box-shadow: 0 0 0 0.14rem #fbf7ee, 0 0 0 0.26rem #3b3126; }
html[data-skin="journal"] .page-tab-btn { border-radius: 0.3rem; }
html[data-skin="journal"] .page-tab-btn.active {
    box-shadow: inset 0 0 0 0.12rem #fbf7ee;
    background-image: -webkit-linear-gradient(bottom, #6fb7b0 0, #6fb7b0 0.3rem, transparent 0.3rem);
    background-image: linear-gradient(0deg, #6fb7b0 0, #6fb7b0 0.3rem, transparent 0.3rem);
  }
html[data-skin="journal"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 0.3rem;
    background-image: -webkit-linear-gradient(left, rgba(111, 183, 176, 0.07) 0, rgba(111, 183, 176, 0.07) 0.06rem, transparent 0.06rem),
      -webkit-linear-gradient(bottom, rgba(111, 183, 176, 0.07) 0, rgba(111, 183, 176, 0.07) 0.06rem, transparent 0.06rem);
    background-image: linear-gradient(90deg, rgba(111, 183, 176, 0.07) 0, rgba(111, 183, 176, 0.07) 0.06rem, transparent 0.06rem),
      linear-gradient(0deg, rgba(111, 183, 176, 0.07) 0, rgba(111, 183, 176, 0.07) 0.06rem, transparent 0.06rem);
    background-size: 1.2rem 1.2rem;
    box-shadow: 0 0 0 0.16rem #e3b04b;
  }
html[data-skin="journal"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 0.3rem;
    box-shadow: 0 0 0 0.16rem #6fb7b0, 0 0 0 0.28rem #fbf7ee;
  }
html[data-skin="journal"] .independent-color-box::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.55rem;
    width: 3.4rem;
    height: 0.95rem;
    margin: 0 auto;
    background-color: #d4ece8;
    background-image: -webkit-repeating-linear-gradient(315deg, #bfe3de 0, #bfe3de 0.4rem, #d4ece8 0.4rem, #d4ece8 0.8rem);
    background-image: repeating-linear-gradient(135deg, #bfe3de 0, #bfe3de 0.4rem, #d4ece8 0.4rem, #d4ece8 0.8rem);
    border-left: 0.2rem dotted #fbf7ee;
    border-right: 0.2rem dotted #fbf7ee;
    pointer-events: none;
  }
html[data-skin="journal"] .color-box-header {
    background: var(--silver);
    border-bottom-style: dashed;
    border-bottom-color: #6fb7b0;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="journal"] .btn-box-close { border-radius: 0.3rem; background: #fbf7ee; box-shadow: inset 0 0 0 0.12rem #e3b04b; }
html[data-skin="journal"] .hair-chip { border-radius: 0.5rem; box-shadow: 0 0 0 0.16rem #6fb7b0, 0 0 0 0.28rem #fbf7ee; }
html[data-skin="journal"] .bg-option canvas { border-color: #e2d6bd; border-radius: 0.3rem; }
html[data-skin="journal"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #6fb7b0; }
html[data-skin="journal"] #photo-modal-view { background-color: rgba(52, 40, 24, 0.86); }
html[data-skin="journal"] .photo-modal-card,
html[data-skin="journal"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 0.4rem;
    box-shadow: 0 0 0 0.2rem #6fb7b0, 0 0 0 0.34rem #fbf7ee;
  }
html[data-skin="journal"] .photo-modal-card::before,
html[data-skin="journal"] .boot-card::before {
    content: '';
    position: absolute;
    right: 1.2rem;
    top: -0.8rem;
    width: 0.8rem;
    height: 1.8rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='44' viewBox='0 0 20 44'%3E%3Cpath d='M6 30V9a4 4 0 0 1 8 0v26a7 7 0 0 1-14 0V12' fill='none' stroke='%23ffffff' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M6 30V9a4 4 0 0 1 8 0v26a7 7 0 0 1-14 0V12' fill='none' stroke='%235f6670' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }
html[data-skin="journal"] #modal-photo-img { border-radius: 0.2rem; }
html[data-skin="journal"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M10 12l8 2M60 30l7-3M96 18l6 4M30 70l8-1M80 84l7 3M104 108l6-3' stroke='%23c0a27a' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='40' cy='40' r='1.4' fill='%23c0a27a'/%3E%3Ccircle cx='100' cy='60' r='1.4' fill='%23c0a27a'/%3E%3C/svg%3E");
    background-size: 7.5rem 7.5rem;
  }
html[data-skin="journal"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-3-5.3 3 1.1-6-4.4-4.2 6-.8Z' fill='%23e3b04b' stroke='%23ffffff' stroke-width='2.6' stroke-linejoin='round' paint-order='stroke'/%3E%3Cpath d='M12 3l2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-3-5.3 3 1.1-6-4.4-4.2 6-.8Z' fill='%23e3b04b'/%3E%3C/svg%3E"); }
html[data-skin="journal"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' fill='%23d4ece8' stroke='%236fb7b0' stroke-width='1.6'/%3E%3Cpath d='M3 19L10 5M10 19L17 5M17 19L21 11' stroke='%236fb7b0' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="journal"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 21C3 14 6 4 12 9 18 4 21 14 12 21Z' fill='%23d9604f' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E"); }
html[data-skin="ocean"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'%3E%3Cpath d='M0 12Q12.5 4 25 12T50 12T75 12T100 12' fill='none' stroke='%23a7d8e6' stroke-width='2'/%3E%3Cpath d='M0 32Q12.5 24 25 32T50 32T75 32T100 32' fill='none' stroke='%23a7d8e6' stroke-width='2'/%3E%3Ccircle cx='18' cy='22' r='2.4' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3Ccircle cx='70' cy='22' r='1.6' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E");
    background-size: 6.25rem 2.5rem;
  }
html[data-skin="ocean"] body::before {
    content: '';
    position: fixed;
    left: 1.2rem;
    bottom: 1.5rem;
    width: 5rem;
    height: 8rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='50' height='80' viewBox='0 0 50 80'%3E%3Cg fill='%23ffffff' fill-opacity='0.5' stroke='%23ffffff' stroke-width='1.6'%3E%3Ccircle cx='14' cy='66' r='9'/%3E%3Ccircle cx='34' cy='44' r='6'/%3E%3Ccircle cx='18' cy='26' r='4.4'/%3E%3Ccircle cx='38' cy='10' r='3'/%3E%3C/g%3E%3Ccircle cx='11' cy='63' r='2' fill='%23ffffff'/%3E%3Ccircle cx='32' cy='42' r='1.4' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="ocean"] body::after {
    content: '';
    position: fixed;
    right: 1.2rem;
    top: 1.5rem;
    width: 4rem;
    height: 6rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cg fill='%23ffffff' fill-opacity='0.5' stroke='%23ffffff' stroke-width='1.6'%3E%3Ccircle cx='24' cy='46' r='8'/%3E%3Ccircle cx='10' cy='28' r='5'/%3E%3Ccircle cx='28' cy='14' r='3.4'/%3E%3C/g%3E%3Ccircle cx='21' cy='43' r='1.8' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="ocean"] #game-frame {
    border-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'%3E%3Cpath d='M0 12Q12.5 6 25 12T50 12T75 12T100 12' fill='none' stroke='%23e2f4f8' stroke-width='1.6'/%3E%3Cpath d='M0 32Q12.5 26 25 32T50 32T75 32T100 32' fill='none' stroke='%23e2f4f8' stroke-width='1.6'/%3E%3C/svg%3E");
    background-size: 6.25rem 2.5rem;
    box-shadow: inset 0 0 0 0.18rem #52c4d6, inset 0 0 0 0.3rem #f5fcfd, inset 0 0 0 0.4rem #bfe4ee;
    outline: 0.22rem solid #a7d8e6;
    outline-offset: 0.18rem;
  }
html[data-skin="ocean"] #game-frame:not(.is-fullbleed) { border-radius: 1.4rem; }
html[data-skin="ocean"] #game-header {
    background: var(--silver);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.3rem var(--silver), 0 0 0 0.4rem #52c4d6;
  }
html[data-skin="ocean"] #game-header::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -0.62rem;
    height: 0.4rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='16' viewBox='0 0 100 16'%3E%3Cpath d='M0 8Q12.5 0 25 8T50 8T75 8T100 8V16H0Z' fill='%2352c4d6'/%3E%3Cpath d='M0 11Q12.5 4 25 11T50 11T75 11T100 11V16H0Z' fill='%231e6f93'/%3E%3C/svg%3E") repeat-x left top / 2.5rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="ocean"] .brand-title { font-weight: 900; }
html[data-skin="ocean"] .pill-btn { box-shadow: inset 0 0 0 0.14rem #bfe4ee; }
html[data-skin="ocean"] .pill-btn.solid { box-shadow: inset 0 0 0 0.14rem #52c4d6; }
html[data-skin="ocean"] .lang-switch { box-shadow: 0 0 0 0.14rem #bfe4ee; }
html[data-skin="ocean"] #stage-area {
    border-color: var(--ink);
    border-radius: 1.2rem;
    box-shadow: 0 0 0 0.16rem #52c4d6;
    outline: 0.14rem dotted #1e6f93;
    outline-offset: 0.2rem;
  }
html[data-skin="ocean"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.1rem solid #bfe4ee;
    border-radius: 0.9rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="ocean"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: 0.3rem;
    height: 1.7rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='80' height='28' viewBox='0 0 80 28'%3E%3Cpath d='M0 0H80V12Q60 20 40 12T0 12Z' fill='%231e6f93'/%3E%3Cpath d='M0 0H80V8Q60 16 40 8T0 8Z' fill='%2352c4d6'/%3E%3Cpath d='M0 0H80V4Q60 11 40 4T0 4Z' fill='%23bfe9f2'/%3E%3Ccircle cx='20' cy='22' r='2' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3Ccircle cx='58' cy='24' r='1.4' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left top / 5rem 1.75rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="ocean"] .wing-btn {
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #52c4d6;
  }
html[data-skin="ocean"] .round-btn {
    background-image: -webkit-radial-gradient(82% 22%, circle, #ffffff 0, #ffffff 0.13rem, transparent 0.15rem), -webkit-radial-gradient(18% 78%, circle, #ffffff 0, #ffffff 0.08rem, transparent 0.1rem);
    background-image: radial-gradient(circle at 82% 22%, #ffffff 0, #ffffff 0.13rem, transparent 0.15rem), radial-gradient(circle at 18% 78%, #ffffff 0, #ffffff 0.08rem, transparent 0.1rem);
    box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #52c4d6;
  }
html[data-skin="ocean"] .round-btn.solid { box-shadow: inset 0 0 0 0.14rem #52c4d6, 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #52c4d6; }
html[data-skin="ocean"] .page-tab-btn { border-radius: 0.8rem; }
html[data-skin="ocean"] .page-tab-btn.active { box-shadow: inset 0 0 0 0.12rem #52c4d6; }
html[data-skin="ocean"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Ccircle cx='14' cy='60' r='5' fill='none' stroke='%23ecf8fb' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='24' r='3.4' fill='none' stroke='%23ecf8fb' stroke-width='1.4'/%3E%3Ccircle cx='74' cy='72' r='2.4' fill='none' stroke='%23ecf8fb' stroke-width='1.4'/%3E%3C/svg%3E");
    background-size: 5.6rem 5.6rem;
    box-shadow: 0 0 0 0.16rem #52c4d6;
  }
html[data-skin="ocean"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 1rem;
    box-shadow: 0 0 0 0.16rem #52c4d6, 0 0 0 0.28rem #ffffff;
  }
html[data-skin="ocean"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #52c4d6;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="ocean"] .btn-box-close { border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 0.12rem #52c4d6; }
html[data-skin="ocean"] .hair-chip { box-shadow: 0 0 0 0.16rem #52c4d6, 0 0 0 0.28rem #ffffff; }
html[data-skin="ocean"] .bg-option canvas { border-color: #bfe4ee; border-radius: 0.6rem; }
html[data-skin="ocean"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #52c4d6; }
html[data-skin="ocean"] #photo-modal-view { background-color: rgba(6, 40, 60, 0.86); }
html[data-skin="ocean"] .photo-modal-card,
html[data-skin="ocean"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 1.4rem;
    box-shadow: 0 0 0 0.2rem #52c4d6, 0 0 0 0.34rem #ffffff;
  }
html[data-skin="ocean"] .photo-modal-card::before,
html[data-skin="ocean"] .boot-card::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: -0.7rem;
    width: 1.7rem;
    height: 1.7rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 3l4.6 11.4 12.2.8-9.4 7.8 3 11.8L20 28l-10.4 6.8 3-11.8-9.4-7.8 12.2-.8Z' fill='%23ff8a7a' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffd2c9'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }
html[data-skin="ocean"] #modal-photo-img { border-radius: 0.6rem; }
html[data-skin="ocean"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='100' height='40' viewBox='0 0 100 40'%3E%3Cpath d='M0 12Q12.5 4 25 12T50 12T75 12T100 12' fill='none' stroke='%23a7d8e6' stroke-width='2'/%3E%3Cpath d='M0 32Q12.5 24 25 32T50 32T75 32T100 32' fill='none' stroke='%23a7d8e6' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 6.25rem 2.5rem;
  }
html[data-skin="ocean"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.4' fill='%23e8f9ff' stroke='%232f7f9f' stroke-width='1.4'/%3E%3Ccircle cx='7.4' cy='7.4' r='1.8' fill='%23ffffff'/%3E%3C/svg%3E"); }
html[data-skin="ocean"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4.4' fill='%23e8f9ff' stroke='%2352c4d6' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="ocean"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l2.6 5.8 6.2.5-4.7 4 1.5 6.2L10 14.4l-5.6 3.1 1.5-6.2-4.7-4 6.2-.5Z' fill='%23ff8a7a'/%3E%3C/svg%3E"); }
html[data-skin="gothic"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 0L48 24 24 48 0 24Z' fill='none' stroke='%232b1118' stroke-width='1.6'/%3E%3Ccircle cx='24' cy='24' r='2.2' fill='%233d1b22'/%3E%3Ccircle cx='0' cy='0' r='1.6' fill='%233d1b22'/%3E%3Ccircle cx='48' cy='0' r='1.6' fill='%233d1b22'/%3E%3Ccircle cx='0' cy='48' r='1.6' fill='%233d1b22'/%3E%3Ccircle cx='48' cy='48' r='1.6' fill='%233d1b22'/%3E%3C/svg%3E");
    background-size: 3rem 3rem;
  }
html[data-skin="gothic"] body::before,
html[data-skin="gothic"] body::after {
    content: '';
    position: fixed;
    top: 3rem;
    width: 5.5rem;
    height: 13rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='140' viewBox='0 0 60 140'%3E%3Cpath d='M4 136V54Q4 20 30 4Q56 20 56 54V136Z' fill='%231f0d12' stroke='%235a0f1c' stroke-width='2.4'/%3E%3Cpath d='M12 130V56Q12 28 30 14Q48 28 48 56V130Z' fill='none' stroke='%233d1b22' stroke-width='1.6'/%3E%3Cpath d='M30 14V130M12 70H48M12 100H48' stroke='%233d1b22' stroke-width='1.4'/%3E%3Ccircle cx='30' cy='44' r='5' fill='%235a0f1c'/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="gothic"] body::before { left: 1.2rem; }
html[data-skin="gothic"] body::after { right: 1.2rem; }
html[data-skin="gothic"] #game-frame {
    border-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 0L48 24 24 48 0 24Z' fill='none' stroke='%2333171d' stroke-width='1.4'/%3E%3Ccircle cx='24' cy='24' r='1.8' fill='%2333171d'/%3E%3C/svg%3E");
    background-size: 3rem 3rem;
    box-shadow: inset 0 0 0 0.18rem #8e1b2e, inset 0 0 0 0.3rem #251317, inset 0 0 0 0.4rem #b9b2b8;
    outline: 0.22rem solid #5a0f1c;
    outline-offset: 0.18rem;
  }
html[data-skin="gothic"] #game-frame:not(.is-fullbleed) { border-radius: 0.3rem; }
html[data-skin="gothic"] #game-header {
    background: var(--silver);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.3rem var(--silver), 0 0 0 0.4rem #8e1b2e;
  }
html[data-skin="gothic"] #game-header::after {
    content: '';
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: -0.72rem;
    height: 0.4rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='25' height='10' viewBox='0 0 25 10'%3E%3Cpath d='M0 0H25L12.5 10Z' fill='%238e1b2e'/%3E%3C/svg%3E") repeat-x left top / 1rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="gothic"] .brand-title { font-weight: 900; }
html[data-skin="gothic"] .pill-btn { border-radius: 0.2rem; box-shadow: inset 0 0 0 0.12rem #5a0f1c; }
html[data-skin="gothic"] .pill-btn.solid { background: #8e1b2e; color: #ffffff; box-shadow: inset 0 0 0 0.12rem #c4283f; }
html[data-skin="gothic"] .pill-btn.solid:active { background: var(--paper); color: var(--ink); }
html[data-skin="gothic"] .lang-switch { border-radius: 0.2rem; box-shadow: 0 0 0 0.14rem #8e1b2e; }
html[data-skin="gothic"] .lang-option.active { background: #8e1b2e; color: #ffffff; }
html[data-skin="gothic"] #stage-area {
    border-color: var(--ink);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.16rem #8e1b2e;
    outline: 0.12rem solid #b9b2b8;
    outline-offset: 0.2rem;
  }
html[data-skin="gothic"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.1rem solid #8e1b2e;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="gothic"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: 0.3rem;
    height: 1.7rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='32' viewBox='0 0 40 32'%3E%3Cpath d='M0 0H40V8Q40 22 20 30Q0 22 0 8Z' fill='%23251317' stroke='%23b9b2b8' stroke-width='1.4'/%3E%3Cpath d='M5 0V8Q5 18 20 25Q35 18 35 8V0' fill='none' stroke='%238e1b2e' stroke-width='1.4'/%3E%3Cpath d='M20 22l3 3-3 3-3-3Z' fill='%23c4283f' stroke='%23b9b2b8' stroke-width='1'/%3E%3C/svg%3E") repeat-x left top / 2.5rem 2rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="gothic"] .wing-btn {
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.14rem #251317, 0 0 0 0.26rem #b9b2b8;
  }
html[data-skin="gothic"] .round-btn { box-shadow: 0 0 0 0.14rem #251317, 0 0 0 0.26rem #b9b2b8; }
html[data-skin="gothic"] .round-btn.solid { background: #8e1b2e; color: #ffffff; }
html[data-skin="gothic"] .round-btn.solid:active { background: var(--paper); color: var(--ink); }
html[data-skin="gothic"] .page-tab-btn { border-radius: 0.2rem; }
html[data-skin="gothic"] .page-tab-btn.active { box-shadow: inset 0 0 0 0.12rem #8e1b2e; }
html[data-skin="gothic"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 0.2rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 0L48 24 24 48 0 24Z' fill='none' stroke='%23f0e4dd' stroke-width='1.2'/%3E%3C/svg%3E");
    background-size: 3rem 3rem;
    box-shadow: 0 0 0 0.16rem #8e1b2e, 0 0 0 0.26rem #251317;
  }
html[data-skin="gothic"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.16rem #8e1b2e, 0 0 0 0.28rem #251317;
  }
html[data-skin="gothic"] .independent-color-box::before,
html[data-skin="gothic"] .photo-modal-card::before,
html[data-skin="gothic"] .boot-card::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 0.1rem;
    right: 0.1rem;
    bottom: 0.1rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M1 13V1H13' fill='none' stroke='%23b9b2b8' stroke-width='1.6'/%3E%3Cpath d='M4 4l3 0-3 3Z' fill='%23c4283f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg transform='translate(14 0) scale(-1 1)'%3E%3Cpath d='M1 13V1H13' fill='none' stroke='%23b9b2b8' stroke-width='1.6'/%3E%3Cpath d='M4 4l3 0-3 3Z' fill='%23c4283f'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg transform='translate(0 14) scale(1 -1)'%3E%3Cpath d='M1 13V1H13' fill='none' stroke='%23b9b2b8' stroke-width='1.6'/%3E%3Cpath d='M4 4l3 0-3 3Z' fill='%23c4283f'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg transform='translate(14 14) scale(-1 -1)'%3E%3Cpath d='M1 13V1H13' fill='none' stroke='%23b9b2b8' stroke-width='1.6'/%3E%3Cpath d='M4 4l3 0-3 3Z' fill='%23c4283f'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left top, right top, left bottom, right bottom;
    background-size: 0.7rem 0.7rem;
    pointer-events: none;
  }
html[data-skin="gothic"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #8e1b2e;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="gothic"] .btn-box-close { border-radius: 0.15rem; box-shadow: inset 0 0 0 0.12rem #8e1b2e; }
html[data-skin="gothic"] .hair-chip { border-radius: 0.3rem; box-shadow: 0 0 0 0.16rem #8e1b2e, 0 0 0 0.28rem #251317; }
html[data-skin="gothic"] .bg-option canvas { border-color: #5a2a33; border-radius: 0.2rem; }
html[data-skin="gothic"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #c4283f; }
html[data-skin="gothic"] #photo-modal-view { background-color: rgba(8, 2, 4, 0.9); }
html[data-skin="gothic"] .photo-modal-card,
html[data-skin="gothic"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 0.2rem;
    box-shadow: 0 0 0 0.2rem #8e1b2e, 0 0 0 0.34rem #251317;
  }
html[data-skin="gothic"] .photo-modal-card::before,
html[data-skin="gothic"] .boot-card::before { background-size: 1rem 1rem; }
html[data-skin="gothic"] #modal-photo-img { border-radius: 0; }
html[data-skin="gothic"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 0L48 24 24 48 0 24Z' fill='none' stroke='%232b1118' stroke-width='1.6'/%3E%3Ccircle cx='24' cy='24' r='2.2' fill='%233d1b22'/%3E%3C/svg%3E");
    background-size: 3rem 3rem;
  }
html[data-skin="gothic"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2C16 5 17 13 10 18C3 13 4 5 10 2Z' fill='%23c4283f' stroke='%235a0f1c' stroke-width='1'/%3E%3C/svg%3E"); }
html[data-skin="gothic"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 1L16 10 10 19 4 10Z' fill='%23d8d2d8' stroke='%236d6670' stroke-width='1.2'/%3E%3C/svg%3E"); }
html[data-skin="gothic"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2 8 8 2-8 2-2 8-2-8-8-2 8-2Z' fill='%23e8dcd2' stroke='%238e1b2e' stroke-width='1'/%3E%3C/svg%3E"); }
html[data-skin="ice"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M0 0L120 0 0 90Z' fill='%23cfe5f6'/%3E%3Cpath d='M200 0L200 110 90 0Z' fill='%23e2f1fb'/%3E%3Cpath d='M0 200L0 120 110 200Z' fill='%23e2f1fb'/%3E%3Cpath d='M200 200L80 200 200 90Z' fill='%23cfe5f6'/%3E%3Cpath d='M60 60L140 100 100 160Z' fill='%23c4dff3' fill-opacity='0.55'/%3E%3C/svg%3E");
    background-size: 14rem 14rem;
  }
html[data-skin="ice"] body::before {
    content: '';
    position: fixed;
    left: 1.5rem;
    top: 2rem;
    width: 5rem;
    height: 5rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M30 4V56M8 17L52 43M8 43L52 17'/%3E%3Cpath d='M24 8L30 14 36 8M24 52L30 46 36 52M5 24L13 24 11 31M55 36L47 36 49 29M5 36L13 36 11 29M55 24L47 24 49 31' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='3.4' fill='%237fd0f0'/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="ice"] body::after {
    content: '';
    position: fixed;
    right: 1.5rem;
    bottom: 2.4rem;
    width: 3.6rem;
    height: 3.6rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M30 4V56M8 17L52 43M8 43L52 17'/%3E%3Cpath d='M24 8L30 14 36 8M24 52L30 46 36 52M5 24L13 24 11 31M55 36L47 36 49 29M5 36L13 36 11 29M55 24L47 24 49 31' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='3.4' fill='%23b6c8ff'/%3E%3C/svg%3E") no-repeat center / contain;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="ice"] #game-frame {
    border-color: var(--ink);
    background-image: -webkit-repeating-linear-gradient(30deg, transparent 0, transparent 1.9rem, rgba(127, 208, 240, 0.16) 1.9rem, rgba(127, 208, 240, 0.16) 1.96rem),
      -webkit-repeating-linear-gradient(150deg, transparent 0, transparent 1.9rem, rgba(127, 208, 240, 0.16) 1.9rem, rgba(127, 208, 240, 0.16) 1.96rem);
    background-image: repeating-linear-gradient(60deg, transparent 0, transparent 1.9rem, rgba(127, 208, 240, 0.16) 1.9rem, rgba(127, 208, 240, 0.16) 1.96rem),
      repeating-linear-gradient(-60deg, transparent 0, transparent 1.9rem, rgba(127, 208, 240, 0.16) 1.9rem, rgba(127, 208, 240, 0.16) 1.96rem);
    box-shadow: inset 0 0 0 0.18rem #7fd0f0, inset 0 0 0 0.3rem #ffffff, inset 0 0 0 0.4rem #cfe5f6;
    outline: 0.22rem solid #bcdaf0;
    outline-offset: 0.18rem;
  }
html[data-skin="ice"] #game-frame:not(.is-fullbleed) { border-radius: 0.5rem; }
html[data-skin="ice"] #game-header {
    background: var(--silver);
    border-radius: 0.4rem;
    box-shadow: 0 0 0 0.3rem var(--silver), 0 0 0 0.4rem #7fd0f0;
  }
html[data-skin="ice"] #game-header::after {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: -0.95rem;
    height: 1rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M2 0H14L8 15Z' fill='%23e6f4fd' stroke='%237fd0f0' stroke-width='1.2'/%3E%3Cpath d='M18 0H34L26 10Z' fill='%23e6f4fd' stroke='%237fd0f0' stroke-width='1.2'/%3E%3Cpath d='M38 0H46L42 8Z' fill='%23e6f4fd' stroke='%237fd0f0' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left top / 3rem 1rem;
    pointer-events: none;
  }
html[data-skin="ice"] .brand-title { font-weight: 900; }
html[data-skin="ice"] .pill-btn { border-radius: 0.5rem; box-shadow: inset 0 0 0 0.14rem #cfe5f6; }
html[data-skin="ice"] .pill-btn.solid { box-shadow: inset 0 0 0 0.14rem #7fd0f0; }
html[data-skin="ice"] .lang-switch { border-radius: 0.5rem; box-shadow: 0 0 0 0.14rem #cfe5f6; }
html[data-skin="ice"] #stage-area {
    border-color: var(--ink);
    border-radius: 0.4rem;
    box-shadow: 0 0 0 0.16rem #7fd0f0;
    outline: 0.12rem solid #b6c8ff;
    outline-offset: 0.2rem;
  }
html[data-skin="ice"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.1rem dashed #b6c8ff;
    border-radius: 0.25rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="ice"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0.3rem;
    right: 0.3rem;
    top: 0.3rem;
    height: 2.2rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='90' height='36' viewBox='0 0 90 36'%3E%3Cpath d='M0 0H90V3H0Z' fill='%23e6f4fd'/%3E%3Cpath d='M4 3H18L11 30Z' fill='%23e6f4fd' stroke='%237fd0f0' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M24 3H34L29 17Z' fill='%23e6f4fd' stroke='%237fd0f0' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M38 3H56L47 34Z' fill='%23e6f4fd' stroke='%237fd0f0' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M62 3H72L67 20Z' fill='%23e6f4fd' stroke='%237fd0f0' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M76 3H88L82 26Z' fill='%23e6f4fd' stroke='%237fd0f0' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M11 8L11 22M47 8L47 26M82 8L82 18' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left top / 5.6rem 2.25rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="ice"] .wing-btn {
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #7fd0f0;
  }
html[data-skin="ice"] .round-btn {
    box-shadow: inset 0 0 0 0.12rem #cfe5f6, 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #7fd0f0;
  }
html[data-skin="ice"] .round-btn.solid { box-shadow: inset 0 0 0 0.12rem #7fd0f0, 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #7fd0f0; }
html[data-skin="ice"] .page-tab-btn { border-radius: 0.4rem; }
html[data-skin="ice"] .page-tab-btn.active { box-shadow: inset 0 0 0 0.12rem #7fd0f0; }
html[data-skin="ice"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 0.4rem;
    background-image: -webkit-repeating-linear-gradient(30deg, transparent 0, transparent 1.9rem, rgba(127, 208, 240, 0.07) 1.9rem, rgba(127, 208, 240, 0.07) 1.96rem),
      -webkit-repeating-linear-gradient(150deg, transparent 0, transparent 1.9rem, rgba(127, 208, 240, 0.07) 1.9rem, rgba(127, 208, 240, 0.07) 1.96rem);
    background-image: repeating-linear-gradient(60deg, transparent 0, transparent 1.9rem, rgba(127, 208, 240, 0.07) 1.9rem, rgba(127, 208, 240, 0.07) 1.96rem),
      repeating-linear-gradient(-60deg, transparent 0, transparent 1.9rem, rgba(127, 208, 240, 0.07) 1.9rem, rgba(127, 208, 240, 0.07) 1.96rem);
    box-shadow: 0 0 0 0.16rem #7fd0f0;
  }
html[data-skin="ice"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 0.4rem;
    box-shadow: 0 0 0 0.16rem #7fd0f0, 0 0 0 0.28rem #ffffff;
  }
html[data-skin="ice"] .independent-color-box::before,
html[data-skin="ice"] .photo-modal-card::before,
html[data-skin="ice"] .boot-card::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: -0.7rem;
    width: 1.4rem;
    height: 1.4rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg stroke='%23ffffff' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M30 4V56M8 17L52 43M8 43L52 17'/%3E%3C/g%3E%3Cg stroke='%232c6aa0' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M30 4V56M8 17L52 43M8 43L52 17'/%3E%3C/g%3E%3Cg stroke='%237fd0f0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M30 4V56M8 17L52 43M8 43L52 17'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='6' fill='%23ffffff' stroke='%232c6aa0' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }
html[data-skin="ice"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #7fd0f0;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="ice"] .btn-box-close { border-radius: 0.3rem; background: #ffffff; box-shadow: inset 0 0 0 0.12rem #7fd0f0; }
html[data-skin="ice"] .hair-chip { border-radius: 0.6rem; box-shadow: 0 0 0 0.16rem #7fd0f0, 0 0 0 0.28rem #ffffff; }
html[data-skin="ice"] .bg-option canvas { border-color: #cfe5f6; border-radius: 0.3rem; }
html[data-skin="ice"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #7fd0f0; }
html[data-skin="ice"] #photo-modal-view { background-color: rgba(10, 34, 62, 0.86); }
html[data-skin="ice"] .photo-modal-card,
html[data-skin="ice"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem #7fd0f0, 0 0 0 0.34rem #ffffff;
  }
html[data-skin="ice"] .photo-modal-card::before,
html[data-skin="ice"] .boot-card::before { left: -0.8rem; top: -0.8rem; width: 1.7rem; height: 1.7rem; }
html[data-skin="ice"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="ice"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M0 0L120 0 0 90Z' fill='%23cfe5f6'/%3E%3Cpath d='M200 0L200 110 90 0Z' fill='%23e2f1fb'/%3E%3Cpath d='M0 200L0 120 110 200Z' fill='%23e2f1fb'/%3E%3Cpath d='M200 200L80 200 200 90Z' fill='%23cfe5f6'/%3E%3C/svg%3E");
    background-size: 14rem 14rem;
  }
html[data-skin="ice"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg stroke='%232c6aa0' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M30 4V56M8 17L52 43M8 43L52 17'/%3E%3C/g%3E%3Cg stroke='%23bfe8f8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M30 4V56M8 17L52 43M8 43L52 17'/%3E%3C/g%3E%3C/svg%3E"); }
html[data-skin="ice"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 1L16 10 10 19 4 10Z' fill='%23b6c8ff' stroke='%234a6fc0' stroke-width='1.2'/%3E%3C/svg%3E"); }
html[data-skin="ice"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23ffffff' stroke='%234a9fd0' stroke-width='1.6'/%3E%3C/svg%3E"); }
html[data-skin="arcade"] body {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M12 20l12 0-6 11Z' fill='%23d12a74' fill-opacity='0.55'/%3E%3Cpath d='M70 14q6-8 12 0t12 0t12 0' fill='none' stroke='%2319c2e6' stroke-opacity='0.55' stroke-width='3'/%3E%3Ccircle cx='108' cy='62' r='6' fill='%23ffc933' fill-opacity='0.5'/%3E%3Cpath d='M30 80h16v16H30Z' fill='none' stroke='%23ffc933' stroke-opacity='0.5' stroke-width='3'/%3E%3Cpath d='M80 100l10 0-5 10Z' fill='%2319c2e6' fill-opacity='0.5'/%3E%3Cpath d='M10 120q6-8 12 0t12 0' fill='none' stroke='%23d12a74' stroke-opacity='0.55' stroke-width='3'/%3E%3Ccircle cx='60' cy='56' r='3' fill='%23ffffff' fill-opacity='0.3'/%3E%3Ccircle cx='120' cy='120' r='3' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/svg%3E");
    background-size: 8.75rem 8.75rem;
  }
html[data-skin="arcade"] #game-frame {
    border-color: var(--ink);
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M12 20l12 0-6 11Z' fill='%2334236a'/%3E%3Cpath d='M70 14q6-8 12 0t12 0t12 0' fill='none' stroke='%2334236a' stroke-width='3'/%3E%3Ccircle cx='108' cy='62' r='6' fill='%2334236a'/%3E%3Cpath d='M30 80h16v16H30Z' fill='none' stroke='%2334236a' stroke-width='3'/%3E%3Cpath d='M80 100l10 0-5 10Z' fill='%2334236a'/%3E%3C/svg%3E");
    background-size: 8.75rem 8.75rem;
    box-shadow: inset 0 0 0 0.18rem #ffc933, inset 0 0 0 0.3rem #271a4d, inset 0 0 0 0.4rem #d12a74;
    outline: 0.4rem dotted #ffc933;
    outline-offset: 0.1rem;
  }
html[data-skin="arcade"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="arcade"] #game-header {
    background-color: var(--silver);
    background-image: -webkit-repeating-linear-gradient(315deg, transparent 0, transparent 0.5rem, rgba(255, 255, 255, 0.07) 0.5rem, rgba(255, 255, 255, 0.07) 1rem);
    background-image: repeating-linear-gradient(135deg, transparent 0, transparent 0.5rem, rgba(255, 255, 255, 0.07) 0.5rem, rgba(255, 255, 255, 0.07) 1rem);
    border-radius: 0.6rem;
    box-shadow: 0 0 0 0.3rem var(--silver), 0 0 0 0.4rem #19c2e6;
  }
html[data-skin="arcade"] #game-header::after {
    content: '';
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: -0.68rem;
    height: 0.6rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'%3E%3Ccircle cx='6' cy='5' r='4' fill='%23ffc933'/%3E%3Ccircle cx='26' cy='5' r='4' fill='%23ff3d9a'/%3E%3Ccircle cx='46' cy='5' r='4' fill='%2319c2e6'/%3E%3C/svg%3E") repeat-x left center / 3.75rem 0.6rem;
    pointer-events: none;
  }
html[data-skin="arcade"] .brand-title { font-weight: 900; }
html[data-skin="arcade"] .pill-btn { border-radius: 0.6rem; box-shadow: inset 0 0 0 0.14rem #7f62d9; }
html[data-skin="arcade"] .pill-btn.solid { background: #d12a74; color: #ffffff; box-shadow: inset 0 0 0 0.14rem #ff7ab5; }
html[data-skin="arcade"] .pill-btn.solid:active { background: var(--paper); color: var(--ink); }
html[data-skin="arcade"] .lang-switch { border-radius: 0.6rem; box-shadow: 0 0 0 0.14rem #19c2e6; }
html[data-skin="arcade"] .lang-option.active { background: #d12a74; color: #ffffff; }
html[data-skin="arcade"] #stage-area {
    border-color: var(--ink);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.16rem #d12a74;
    outline: 0.12rem solid #19c2e6;
    outline-offset: 0.2rem;
  }
html[data-skin="arcade"] #stage-area::before {
    content: '';
    position: absolute;
    left: 0.3rem;
    top: 0.3rem;
    right: 0.3rem;
    bottom: 0.3rem;
    border: 0.1rem solid #ffc933;
    border-radius: 0.3rem;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="arcade"] #stage-area::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1rem;
    background-color: #271a4d;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23ffc933'/%3E%3Ccircle cx='28' cy='8' r='4' fill='%23ff3d9a'/%3E%3Ccircle cx='48' cy='8' r='4' fill='%2319c2e6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 3.75rem 1rem;
    background-position: left center;
    z-index: 49;
    pointer-events: none;
  }
html[data-skin="arcade"] .wing-btn {
    border-radius: 0.6rem;
    box-shadow: 0 0 0 0.14rem #271a4d, 0 0 0 0.26rem #ffc933;
  }
html[data-skin="arcade"] .round-btn { box-shadow: 0 0 0 0.14rem #271a4d, 0 0 0 0.26rem #ffc933; }
html[data-skin="arcade"] .round-btn.solid {
    background: #d12a74;
    color: #ffffff;
    box-shadow: inset 0 0 0 0.14rem #ff7ab5, 0 0 0 0.14rem #271a4d, 0 0 0 0.26rem #ffc933;
  }
html[data-skin="arcade"] .round-btn.solid:active { background: var(--paper); color: var(--ink); }
html[data-skin="arcade"] .page-tab-btn { border-radius: 0.5rem; }
html[data-skin="arcade"] .page-tab-btn.active { box-shadow: inset 0 0 0 0.12rem #ffc933; }
html[data-skin="arcade"] #fixed-wardrobe-box {
    border-color: var(--ink);
    border-radius: 0.5rem;
    background-image: -webkit-linear-gradient(45deg, rgba(127, 98, 217, 0.04) 25%, transparent 25%, transparent 75%, rgba(127, 98, 217, 0.04) 75%),
      -webkit-linear-gradient(45deg, rgba(127, 98, 217, 0.04) 25%, transparent 25%, transparent 75%, rgba(127, 98, 217, 0.04) 75%);
    background-image: linear-gradient(45deg, rgba(127, 98, 217, 0.04) 25%, transparent 25%, transparent 75%, rgba(127, 98, 217, 0.04) 75%),
      linear-gradient(45deg, rgba(127, 98, 217, 0.04) 25%, transparent 25%, transparent 75%, rgba(127, 98, 217, 0.04) 75%);
    background-size: 1.6rem 1.6rem;
    background-position: 0 0, 0.8rem 0.8rem;
    box-shadow: 0 0 0 0.16rem #d12a74;
  }
html[data-skin="arcade"] .independent-color-box {
    border-color: var(--ink);
    border-radius: 0.6rem;
    box-shadow: 0 0 0 0.16rem #ffc933, 0 0 0 0.28rem #271a4d;
  }
html[data-skin="arcade"] .color-box-header {
    background-color: var(--silver);
    background-image: -webkit-repeating-linear-gradient(315deg, transparent 0, transparent 0.5rem, rgba(255, 255, 255, 0.07) 0.5rem, rgba(255, 255, 255, 0.07) 1rem);
    background-image: repeating-linear-gradient(135deg, transparent 0, transparent 0.5rem, rgba(255, 255, 255, 0.07) 0.5rem, rgba(255, 255, 255, 0.07) 1rem);
    border-bottom-color: #d12a74;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="arcade"] .btn-box-close { border-radius: 50%; box-shadow: inset 0 0 0 0.12rem #d12a74; }
html[data-skin="arcade"] .hair-chip { box-shadow: 0 0 0 0.16rem #ffc933, 0 0 0 0.28rem #271a4d; }
html[data-skin="arcade"] .bg-option canvas { border-color: #5b3fa8; border-radius: 0.4rem; }
html[data-skin="arcade"] .bg-option.active canvas { border-color: var(--ink); box-shadow: 0 0 0 0.16rem #ffc933; }
html[data-skin="arcade"] #photo-modal-view { background-color: rgba(10, 4, 26, 0.9); }
html[data-skin="arcade"] .photo-modal-card,
html[data-skin="arcade"] .boot-card {
    position: relative;
    border-color: var(--ink);
    border-radius: 0.8rem;
    box-shadow: 0 0 0 0.2rem #ffc933, 0 0 0 0.34rem #271a4d;
  }
html[data-skin="arcade"] .photo-modal-card::before,
html[data-skin="arcade"] .boot-card::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: -0.7rem;
    width: 1.7rem;
    height: 1.7rem;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 2l5.4 11.8 12.6 1.4-9.4 8.6 2.6 12.6L20 29.6 8.8 36.4l2.6-12.6L2 15.2l12.6-1.4Z' fill='%23ffc933' stroke='%23271a4d' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    pointer-events: none;
  }
html[data-skin="arcade"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="arcade"] #boot-box {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath d='M12 20l12 0-6 11Z' fill='%23d12a74' fill-opacity='0.55'/%3E%3Cpath d='M70 14q6-8 12 0t12 0t12 0' fill='none' stroke='%2319c2e6' stroke-opacity='0.55' stroke-width='3'/%3E%3Ccircle cx='108' cy='62' r='6' fill='%23ffc933' fill-opacity='0.5'/%3E%3Cpath d='M30 80h16v16H30Z' fill='none' stroke='%23ffc933' stroke-opacity='0.5' stroke-width='3'/%3E%3C/svg%3E");
    background-size: 8.75rem 8.75rem;
  }
html[data-skin="arcade"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7.2.8-5.4 4.8 1.5 7.2L12 17.8 5.7 21.4l1.5-7.2L1.8 9.4 9 8.6Z' fill='%23ffc933' stroke='%23271a4d' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="arcade"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 1L17 10 10 19 3 10Z' fill='%2319c2e6' stroke='%23271a4d' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="arcade"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.4' fill='%23d12a74' stroke='%23271a4d' stroke-width='1.4'/%3E%3Ccircle cx='10' cy='10' r='3.4' fill='none' stroke='%23ff7ab5' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="cloud"] body::before {
    content: '';
    position: fixed;
    left: 1.4rem;
    top: 2.8rem;
    width: 7.5rem;
    height: 4.7rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='80' height='50' viewBox='0 0 80 50'%3E%3Cpath d='M18 42C8 42 4 30 14 27C12 16 26 10 34 17C38 6 56 6 58 20C70 18 76 34 64 42Z' fill='%23eef1f8' stroke='%23c3cbdd' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="cloud"] body::after {
    content: '';
    position: fixed;
    right: 1.6rem;
    bottom: 3.4rem;
    width: 5.4rem;
    height: 3.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='80' height='50' viewBox='0 0 80 50'%3E%3Cpath d='M18 42C8 42 4 30 14 27C12 16 26 10 34 17C38 6 56 6 58 20C70 18 76 34 64 42Z' fill='%23eef1f8' stroke='%23c3cbdd' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="cloud"] #game-frame {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.14rem #d9e0f0, 0 0.22rem 0 #cdd5e6, 0 0.44rem 0 #dbe1ee, 0 0.7rem 1.2rem rgba(40, 52, 86, 0.16);
  }
html[data-skin="cloud"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="cloud"] #game-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 0H40V3A5 5 0 0 1 30 3A5 5 0 0 1 20 3A5 5 0 0 1 10 3A5 5 0 0 1 0 3Z' fill='%23cbd4e8'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1.6rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="cloud"] #game-header {
    background: var(--silver);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem var(--silver), 0 0.2rem 0 0.2rem #4f6290;
  }
html[data-skin="cloud"] .brand-title { font-weight: 900; }
html[data-skin="cloud"] .pill-btn { box-shadow: 0 0.14rem 0 #4f6290; }
html[data-skin="cloud"] .lang-switch { box-shadow: 0 0.14rem 0 #4f6290; }
html[data-skin="cloud"] #stage-area {
    border-color: var(--ink);
    box-shadow: 0 0 0 0.14rem #d9e0f0;
  }
html[data-skin="cloud"] #fixed-wardrobe-box {
    border-color: var(--ink);
    background-image: none;
    box-shadow: 0 0 0 0.14rem #d9e0f0;
  }
html[data-skin="cloud"] .wing-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #4f6290; }
html[data-skin="cloud"] .round-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #4f6290; }
html[data-skin="cloud"] .page-tab-btn { border-color: #7f89a2; }
html[data-skin="cloud"] .page-tab-btn.active {
    border-color: var(--ink);
    background: #d6def0;
    box-shadow: inset 0 0 0 0.16rem #4f6290;
  }
html[data-skin="cloud"] .independent-color-box,
html[data-skin="cloud"] .photo-modal-card,
html[data-skin="cloud"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.16rem #d9e0f0, 0 0.4rem 1.1rem rgba(40, 52, 86, 0.16);
  }
html[data-skin="cloud"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #4f6290;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="cloud"] .btn-box-close { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.12rem #4f6290; }
html[data-skin="cloud"] .hair-chip { box-shadow: 0 0 0 0.16rem #4f6290, 0 0 0 0.3rem #ffffff; }
html[data-skin="cloud"] .bg-option canvas { border-color: #7f89a2; }
html[data-skin="cloud"] .bg-option.active canvas { border-color: var(--ink); outline: 0.16rem solid #4f6290; outline-offset: -0.32rem; }
html[data-skin="cloud"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="cloud"] .skin-fx {
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
  }
html[data-skin="cloud"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 15C1 15 0 11 3 10C2 6 7 4 9 7C10 3 16 3 16 8C19 8 20 13 16 15Z' fill='%23ffffff' stroke='%234f6290' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="cloud"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3.6' fill='%23ffffff' stroke='%234f6290' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="cloud"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 3L16 10 10 17 4 10Z' fill='%23dfe5f3' stroke='%234f6290' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="mist"] body,
html[data-skin="mist"] #boot-box {
    background-image: -webkit-repeating-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.4) 0.6rem, rgba(255, 255, 255, 0) 0.6rem, rgba(255, 255, 255, 0) 1.2rem);
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.4) 0.6rem, rgba(255, 255, 255, 0) 0.6rem, rgba(255, 255, 255, 0) 1.2rem);
  }
html[data-skin="mist"] body::before {
    content: '';
    position: fixed;
    left: 1.2rem;
    bottom: 3.2rem;
    width: 7rem;
    height: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='70' height='30' viewBox='0 0 70 30'%3E%3Cg stroke='%23b4c8da' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6H46'/%3E%3Cpath d='M18 15H64'/%3E%3Cpath d='M4 24H38'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="mist"] body::after {
    content: '';
    position: fixed;
    right: 1.2rem;
    top: 2.6rem;
    width: 6rem;
    height: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='70' height='30' viewBox='0 0 70 30'%3E%3Cg stroke='%23b4c8da' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 6H64'/%3E%3Cpath d='M6 15H52'/%3E%3Cpath d='M32 24H66'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="mist"] #game-frame {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.14rem #d0e3f3, 0 0.22rem 0 #c3d5e5, 0 0.44rem 0 #d4e2ee, 0 0.7rem 1.2rem rgba(30, 70, 110, 0.16);
  }
html[data-skin="mist"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="mist"] #game-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Crect y='1' width='40' height='1.6' fill='%232d6a9f'/%3E%3Crect y='4.4' width='40' height='1' fill='%239fc3e0'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 2.5rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="mist"] #game-header {
    background: var(--silver);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem var(--silver), 0 0.2rem 0 0.2rem #2d6a9f;
  }
html[data-skin="mist"] .brand-title { font-weight: 900; }
html[data-skin="mist"] .pill-btn { box-shadow: 0 0.14rem 0 #2d6a9f; }
html[data-skin="mist"] .lang-switch { box-shadow: 0 0.14rem 0 #2d6a9f; }
html[data-skin="mist"] #stage-area {
    border-color: var(--ink);
    box-shadow: 0 0 0 0.14rem #d0e3f3;
  }
html[data-skin="mist"] #fixed-wardrobe-box {
    border-color: var(--ink);
    background-image: none;
    box-shadow: 0 0 0 0.14rem #d0e3f3;
  }
html[data-skin="mist"] .wing-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #2d6a9f; }
html[data-skin="mist"] .round-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #2d6a9f; }
html[data-skin="mist"] .page-tab-btn { border-color: #7592ad; }
html[data-skin="mist"] .page-tab-btn.active {
    border-color: var(--ink);
    background: #cfe2f3;
    box-shadow: inset 0 0 0 0.16rem #2d6a9f;
  }
html[data-skin="mist"] .independent-color-box,
html[data-skin="mist"] .photo-modal-card,
html[data-skin="mist"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.16rem #d0e3f3, 0 0.4rem 1.1rem rgba(30, 70, 110, 0.16);
  }
html[data-skin="mist"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #2d6a9f;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="mist"] .btn-box-close { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.12rem #2d6a9f; }
html[data-skin="mist"] .hair-chip { box-shadow: 0 0 0 0.16rem #2d6a9f, 0 0 0 0.3rem #ffffff; }
html[data-skin="mist"] .bg-option canvas { border-color: #7592ad; }
html[data-skin="mist"] .bg-option.active canvas { border-color: var(--ink); outline: 0.16rem solid #2d6a9f; outline-offset: -0.32rem; }
html[data-skin="mist"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="mist"] .skin-fx {
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
  }
html[data-skin="mist"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2C14 8 16 11 10 18C4 11 6 8 10 2Z' fill='%23ffffff' stroke='%232d6a9f' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="mist"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%232d6a9f' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="mist"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3' fill='%239fc3e0' stroke='%232d6a9f' stroke-width='1.2'/%3E%3C/svg%3E"); }
html[data-skin="tea"] body,
html[data-skin="tea"] #boot-box {
    background-image: -webkit-radial-gradient(#d3c5b8 0.17rem, transparent 0.18rem), -webkit-radial-gradient(#dbcfc4 0.17rem, transparent 0.18rem);
    background-image: radial-gradient(#d3c5b8 0.17rem, transparent 0.18rem), radial-gradient(#dbcfc4 0.17rem, transparent 0.18rem);
    background-size: 2.4rem 2.4rem, 2.4rem 2.4rem;
    background-position: 0 0, 1.2rem 1.2rem;
  }
html[data-skin="tea"] body::before {
    content: '';
    position: fixed;
    left: 1.6rem;
    bottom: 3rem;
    width: 5.6rem;
    height: 5.6rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='24' fill='none' stroke='%23cdbeb0' stroke-width='2.4'/%3E%3Ccircle cx='30' cy='30' r='18' fill='none' stroke='%23d8cabd' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="tea"] body::after {
    content: '';
    position: fixed;
    right: 2rem;
    top: 2.8rem;
    width: 4rem;
    height: 4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='24' fill='none' stroke='%23cdbeb0' stroke-width='2.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="tea"] #game-frame {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.14rem #ead9cb, 0 0.22rem 0 #d8cabd, 0 0.44rem 0 #e3d8ce, 0 0.7rem 1.2rem rgba(90, 60, 40, 0.16);
  }
html[data-skin="tea"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="tea"] #game-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Ccircle cx='12' cy='4' r='2.6' fill='%238a5636'/%3E%3Ccircle cx='0' cy='4' r='1.2' fill='%23c9ab93'/%3E%3Ccircle cx='24' cy='4' r='1.2' fill='%23c9ab93'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1.5rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="tea"] #game-header {
    background: var(--silver);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem var(--silver), 0 0.2rem 0 0.2rem #8a5636;
  }
html[data-skin="tea"] .brand-title { font-weight: 900; }
html[data-skin="tea"] .pill-btn { box-shadow: 0 0.14rem 0 #8a5636; }
html[data-skin="tea"] .lang-switch { box-shadow: 0 0.14rem 0 #8a5636; }
html[data-skin="tea"] #stage-area {
    border-color: var(--ink);
    box-shadow: 0 0 0 0.14rem #ead9cb;
  }
html[data-skin="tea"] #fixed-wardrobe-box {
    border-color: var(--ink);
    background-image: none;
    box-shadow: 0 0 0 0.14rem #ead9cb;
  }
html[data-skin="tea"] .wing-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #8a5636; }
html[data-skin="tea"] .round-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #8a5636; }
html[data-skin="tea"] .page-tab-btn { border-color: #937b69; }
html[data-skin="tea"] .page-tab-btn.active {
    border-color: var(--ink);
    background: #ecdccd;
    box-shadow: inset 0 0 0 0.16rem #8a5636;
  }
html[data-skin="tea"] .independent-color-box,
html[data-skin="tea"] .photo-modal-card,
html[data-skin="tea"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.16rem #ead9cb, 0 0.4rem 1.1rem rgba(90, 60, 40, 0.16);
  }
html[data-skin="tea"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #8a5636;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="tea"] .btn-box-close { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.12rem #8a5636; }
html[data-skin="tea"] .hair-chip { box-shadow: 0 0 0 0.16rem #8a5636, 0 0 0 0.3rem #ffffff; }
html[data-skin="tea"] .bg-option canvas { border-color: #937b69; }
html[data-skin="tea"] .bg-option.active canvas { border-color: var(--ink); outline: 0.16rem solid #8a5636; outline-offset: -0.32rem; }
html[data-skin="tea"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="tea"] .skin-fx {
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
  }
html[data-skin="tea"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4.4' fill='%238a5636'/%3E%3C/svg%3E"); }
html[data-skin="tea"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cellipse cx='10' cy='10' rx='5' ry='3.2' transform='rotate(35 10 10)' fill='%23ead9cb' stroke='%238a5636' stroke-width='1.3'/%3E%3C/svg%3E"); }
html[data-skin="tea"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4.6' fill='none' stroke='%238a5636' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="matcha"] body::before {
    content: '';
    position: fixed;
    left: 1.6rem;
    top: 2.8rem;
    width: 4.6rem;
    height: 4.6rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M8 52C8 20 30 6 54 6C54 32 38 52 8 52Z' fill='%23e9f1e4' stroke='%23b9ccb3' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M10 50L42 18' stroke='%23b9ccb3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="matcha"] body::after {
    content: '';
    position: fixed;
    right: 1.8rem;
    bottom: 3.2rem;
    width: 4.6rem;
    height: 4.6rem;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M8 52C8 20 30 6 54 6C54 32 38 52 8 52Z' fill='%23e9f1e4' stroke='%23b9ccb3' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M10 50L42 18' stroke='%23b9ccb3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="matcha"] #game-frame {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.14rem #d3e4cf, 0 0.22rem 0 #c9d8c3, 0 0.44rem 0 #d7e3d2, 0 0.7rem 1.2rem rgba(40, 80, 50, 0.15);
  }
html[data-skin="matcha"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="matcha"] #game-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='32' height='8' viewBox='0 0 32 8'%3E%3Crect y='3.4' width='32' height='1.2' fill='%2344784c'/%3E%3Cpath d='M8 3.6C8 1 10.6 0.4 12 0.4C12 2.8 10.4 3.6 8 3.6Z' fill='%237fae85'/%3E%3Cpath d='M24 4.4C24 7 21.4 7.6 20 7.6C20 5.2 21.6 4.4 24 4.4Z' fill='%237fae85'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 2rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="matcha"] #game-header {
    background: var(--silver);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem var(--silver), 0 0.2rem 0 0.2rem #44784c;
  }
html[data-skin="matcha"] .brand-title { font-weight: 900; }
html[data-skin="matcha"] .pill-btn { box-shadow: 0 0.14rem 0 #44784c; }
html[data-skin="matcha"] .lang-switch { box-shadow: 0 0.14rem 0 #44784c; }
html[data-skin="matcha"] #stage-area {
    border-color: var(--ink);
    box-shadow: 0 0 0 0.14rem #d3e4cf;
  }
html[data-skin="matcha"] #fixed-wardrobe-box {
    border-color: var(--ink);
    background-image: none;
    box-shadow: 0 0 0 0.14rem #d3e4cf;
  }
html[data-skin="matcha"] .wing-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #44784c; }
html[data-skin="matcha"] .round-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #44784c; }
html[data-skin="matcha"] .page-tab-btn { border-color: #6f8d74; }
html[data-skin="matcha"] .page-tab-btn.active {
    border-color: var(--ink);
    background: #d2e4cd;
    box-shadow: inset 0 0 0 0.16rem #44784c;
  }
html[data-skin="matcha"] .independent-color-box,
html[data-skin="matcha"] .photo-modal-card,
html[data-skin="matcha"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.16rem #d3e4cf, 0 0.4rem 1.1rem rgba(40, 80, 50, 0.15);
  }
html[data-skin="matcha"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #44784c;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="matcha"] .btn-box-close { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.12rem #44784c; }
html[data-skin="matcha"] .hair-chip { box-shadow: 0 0 0 0.16rem #44784c, 0 0 0 0.3rem #ffffff; }
html[data-skin="matcha"] .bg-option canvas { border-color: #6f8d74; }
html[data-skin="matcha"] .bg-option.active canvas { border-color: var(--ink); outline: 0.16rem solid #44784c; outline-offset: -0.32rem; }
html[data-skin="matcha"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="matcha"] .skin-fx {
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
  }
html[data-skin="matcha"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M3 17C3 7 9 3 17 3C17 11 13 17 3 17Z' fill='%23dcebd8' stroke='%2344784c' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="matcha"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3.4' fill='%23ffffff' stroke='%2344784c' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="matcha"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2C15 7 15 13 10 18C5 13 5 7 10 2Z' fill='%23dcebd8' stroke='%2344784c' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="lotus"] body::before {
    content: '';
    position: fixed;
    left: 1.8rem;
    bottom: 3rem;
    width: 5rem;
    height: 5rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='90' height='60' viewBox='0 0 90 60'%3E%3Cpath d='M30 56C8 46 8 18 30 4C52 18 52 46 30 56Z' transform='translate(0 0)' fill='%23f6e9ee' stroke='%23dcbccb' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M30 56C8 46 8 18 30 4C52 18 52 46 30 56Z' transform='translate(30 0)' fill='%23f6e9ee' stroke='%23dcbccb' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M30 56C8 46 8 18 30 4C52 18 52 46 30 56Z' transform='translate(15 4)' fill='%23f6e9ee' stroke='%23dcbccb' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="lotus"] body::after {
    content: '';
    position: fixed;
    right: 2rem;
    top: 2.8rem;
    width: 3.4rem;
    height: 3.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 56C8 46 8 18 30 4C52 18 52 46 30 56Z' fill='%23f6e9ee' stroke='%23dcbccb' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="lotus"] #game-frame {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.14rem #f0d6e1, 0 0.22rem 0 #dcc9d3, 0 0.44rem 0 #e7dae0, 0 0.7rem 1.2rem rgba(110, 50, 80, 0.15);
  }
html[data-skin="lotus"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="lotus"] #game-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 0H24V2.4A6 6 0 0 1 18 2.4A6 6 0 0 1 12 2.4A6 6 0 0 1 6 2.4A6 6 0 0 1 0 2.4Z' fill='%23e9c3d2'/%3E%3Crect width='24' height='1.2' fill='%23a0446a'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1.6rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="lotus"] #game-header {
    background: var(--silver);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem var(--silver), 0 0.2rem 0 0.2rem #a0446a;
  }
html[data-skin="lotus"] .brand-title { font-weight: 900; }
html[data-skin="lotus"] .pill-btn { box-shadow: 0 0.14rem 0 #a0446a; }
html[data-skin="lotus"] .lang-switch { box-shadow: 0 0.14rem 0 #a0446a; }
html[data-skin="lotus"] #stage-area {
    border-color: var(--ink);
    box-shadow: 0 0 0 0.14rem #f0d6e1;
  }
html[data-skin="lotus"] #fixed-wardrobe-box {
    border-color: var(--ink);
    background-image: none;
    box-shadow: 0 0 0 0.14rem #f0d6e1;
  }
html[data-skin="lotus"] .wing-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #a0446a; }
html[data-skin="lotus"] .round-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #a0446a; }
html[data-skin="lotus"] .page-tab-btn { border-color: #9a7488; }
html[data-skin="lotus"] .page-tab-btn.active {
    border-color: var(--ink);
    background: #f0d5e0;
    box-shadow: inset 0 0 0 0.16rem #a0446a;
  }
html[data-skin="lotus"] .independent-color-box,
html[data-skin="lotus"] .photo-modal-card,
html[data-skin="lotus"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.16rem #f0d6e1, 0 0.4rem 1.1rem rgba(110, 50, 80, 0.15);
  }
html[data-skin="lotus"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #a0446a;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="lotus"] .btn-box-close { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.12rem #a0446a; }
html[data-skin="lotus"] .hair-chip { box-shadow: 0 0 0 0.16rem #a0446a, 0 0 0 0.3rem #ffffff; }
html[data-skin="lotus"] .bg-option canvas { border-color: #9a7488; }
html[data-skin="lotus"] .bg-option.active canvas { border-color: var(--ink); outline: 0.16rem solid #a0446a; outline-offset: -0.32rem; }
html[data-skin="lotus"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="lotus"] .skin-fx {
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
  }
html[data-skin="lotus"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2C16 7 16 14 10 18C4 14 4 7 10 2Z' fill='%23f6dfe8' stroke='%23a0446a' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="lotus"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3.2' fill='%23ffffff' stroke='%23a0446a' stroke-width='1.4'/%3E%3C/svg%3E"); }
html[data-skin="lotus"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%23a0446a' stroke-width='1.3'/%3E%3C/svg%3E"); }
html[data-skin="lavender"] body,
html[data-skin="lavender"] #boot-box {
    background-image: -webkit-linear-gradient(left, rgba(110, 100, 170, 0.14) 0, rgba(110, 100, 170, 0.14) 0.06rem, transparent 0.06rem), -webkit-linear-gradient(bottom, rgba(110, 100, 170, 0.14) 0, rgba(110, 100, 170, 0.14) 0.06rem, transparent 0.06rem);
    background-image: linear-gradient(90deg, rgba(110, 100, 170, 0.14) 0, rgba(110, 100, 170, 0.14) 0.06rem, transparent 0.06rem), linear-gradient(0deg, rgba(110, 100, 170, 0.14) 0, rgba(110, 100, 170, 0.14) 0.06rem, transparent 0.06rem);
    background-size: 1.6rem 1.6rem, 1.6rem 1.6rem;
  }
html[data-skin="lavender"] #game-frame {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.14rem #dcd8f1, 0 0.22rem 0 #cdc9e3, 0 0.44rem 0 #dad7ec, 0 0.7rem 1.2rem rgba(60, 50, 120, 0.15);
  }
html[data-skin="lavender"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="lavender"] #game-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Crect y='3.4' width='24' height='1.2' fill='%235b50a2'/%3E%3Cpath d='M12 1.4L14.4 4 12 6.6 9.6 4Z' fill='%23b9b2e6' stroke='%235b50a2' stroke-width='0.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1.5rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="lavender"] #game-header {
    background: var(--silver);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem var(--silver), 0 0.2rem 0 0.2rem #5b50a2;
  }
html[data-skin="lavender"] .brand-title { font-weight: 900; }
html[data-skin="lavender"] .pill-btn { box-shadow: 0 0.14rem 0 #5b50a2; }
html[data-skin="lavender"] .lang-switch { box-shadow: 0 0.14rem 0 #5b50a2; }
html[data-skin="lavender"] #stage-area {
    border-color: var(--ink);
    box-shadow: 0 0 0 0.14rem #dcd8f1;
  }
html[data-skin="lavender"] #fixed-wardrobe-box {
    border-color: var(--ink);
    background-image: none;
    box-shadow: 0 0 0 0.14rem #dcd8f1;
  }
html[data-skin="lavender"] .wing-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #5b50a2; }
html[data-skin="lavender"] .round-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #5b50a2; }
html[data-skin="lavender"] .page-tab-btn { border-color: #7f79a6; }
html[data-skin="lavender"] .page-tab-btn.active {
    border-color: var(--ink);
    background: #dad6f0;
    box-shadow: inset 0 0 0 0.16rem #5b50a2;
  }
html[data-skin="lavender"] .independent-color-box,
html[data-skin="lavender"] .photo-modal-card,
html[data-skin="lavender"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.16rem #dcd8f1, 0 0.4rem 1.1rem rgba(60, 50, 120, 0.15);
  }
html[data-skin="lavender"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #5b50a2;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="lavender"] .btn-box-close { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.12rem #5b50a2; }
html[data-skin="lavender"] .hair-chip { box-shadow: 0 0 0 0.16rem #5b50a2, 0 0 0 0.3rem #ffffff; }
html[data-skin="lavender"] .bg-option canvas { border-color: #7f79a6; }
html[data-skin="lavender"] .bg-option.active canvas { border-color: var(--ink); outline: 0.16rem solid #5b50a2; outline-offset: -0.32rem; }
html[data-skin="lavender"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="lavender"] .skin-fx {
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
  }
html[data-skin="lavender"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2L12 8 18 10 12 12 10 18 8 12 2 10 8 8Z' fill='%23ffffff' stroke='%235b50a2' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-skin="lavender"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3.4' fill='%23c8c2ee' stroke='%235b50a2' stroke-width='1.3'/%3E%3C/svg%3E"); }
html[data-skin="lavender"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='5' fill='none' stroke='%235b50a2' stroke-width='1.3'/%3E%3C/svg%3E"); }
html[data-skin="sand"] body,
html[data-skin="sand"] #boot-box {
    background-image: -webkit-repeating-linear-gradient(45deg, rgba(150, 128, 84, 0.12) 0, rgba(150, 128, 84, 0.12) 0.06rem, rgba(150, 128, 84, 0) 0.06rem, rgba(150, 128, 84, 0) 0.55rem);
    background-image: repeating-linear-gradient(45deg, rgba(150, 128, 84, 0.12) 0, rgba(150, 128, 84, 0.12) 0.06rem, rgba(150, 128, 84, 0) 0.06rem, rgba(150, 128, 84, 0) 0.55rem);
  }
html[data-skin="sand"] body::before {
    content: '';
    position: fixed;
    left: 1.2rem;
    bottom: 3rem;
    width: 7rem;
    height: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='70' height='30' viewBox='0 0 70 30'%3E%3Cg fill='none' stroke='%23cfc2a0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8Q14 -2 24 8T44 8T64 8'/%3E%3Cpath d='M4 18Q14 8 24 18T44 18T64 18'/%3E%3Cpath d='M4 28Q14 18 24 28T44 28T64 28'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="sand"] body::after {
    content: '';
    position: fixed;
    right: 1.2rem;
    top: 2.8rem;
    width: 6rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='70' height='24' viewBox='0 0 70 24'%3E%3Cg fill='none' stroke='%23cfc2a0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 8Q14 -2 24 8T44 8T64 8'/%3E%3Cpath d='M4 20Q14 10 24 20T44 20T64 20'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="sand"] #game-frame {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.14rem #ecdfbf, 0 0.22rem 0 #d9ceb4, 0 0.44rem 0 #e4dbc6, 0 0.7rem 1.2rem rgba(90, 70, 30, 0.15);
  }
html[data-skin="sand"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="sand"] #game-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.4rem;
    background-image: -webkit-repeating-linear-gradient(45deg, #8a6420 0, #8a6420 0.1rem, #ecdfbf 0.1rem, #ecdfbf 0.34rem);
    background-image: repeating-linear-gradient(45deg, #8a6420 0, #8a6420 0.1rem, #ecdfbf 0.1rem, #ecdfbf 0.34rem);
    background-repeat: repeat-x;
    pointer-events: none;
  }
html[data-skin="sand"] #game-header {
    background: var(--silver);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem var(--silver), 0 0.2rem 0 0.2rem #8a6420;
  }
html[data-skin="sand"] .brand-title { font-weight: 900; }
html[data-skin="sand"] .pill-btn { box-shadow: 0 0.14rem 0 #8a6420; }
html[data-skin="sand"] .lang-switch { box-shadow: 0 0.14rem 0 #8a6420; }
html[data-skin="sand"] #stage-area {
    border-color: var(--ink);
    box-shadow: 0 0 0 0.14rem #ecdfbf;
  }
html[data-skin="sand"] #fixed-wardrobe-box {
    border-color: var(--ink);
    background-image: none;
    box-shadow: 0 0 0 0.14rem #ecdfbf;
  }
html[data-skin="sand"] .wing-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #8a6420; }
html[data-skin="sand"] .round-btn { box-shadow: 0 0 0 0.14rem #ffffff, 0 0 0 0.26rem #8a6420; }
html[data-skin="sand"] .page-tab-btn { border-color: #8f7e5a; }
html[data-skin="sand"] .page-tab-btn.active {
    border-color: var(--ink);
    background: #eadcb9;
    box-shadow: inset 0 0 0 0.16rem #8a6420;
  }
html[data-skin="sand"] .independent-color-box,
html[data-skin="sand"] .photo-modal-card,
html[data-skin="sand"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.16rem #ecdfbf, 0 0.4rem 1.1rem rgba(90, 70, 30, 0.15);
  }
html[data-skin="sand"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #8a6420;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="sand"] .btn-box-close { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.12rem #8a6420; }
html[data-skin="sand"] .hair-chip { box-shadow: 0 0 0 0.16rem #8a6420, 0 0 0 0.3rem #ffffff; }
html[data-skin="sand"] .bg-option canvas { border-color: #8f7e5a; }
html[data-skin="sand"] .bg-option.active canvas { border-color: var(--ink); outline: 0.16rem solid #8a6420; outline-offset: -0.32rem; }
html[data-skin="sand"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="sand"] .skin-fx {
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
  }
html[data-skin="sand"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cellipse cx='10' cy='10' rx='4.6' ry='2.6' transform='rotate(-30 10 10)' fill='%23ecdfbf' stroke='%238a6420' stroke-width='1.3'/%3E%3C/svg%3E"); }
html[data-skin="sand"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3' fill='%238a6420'/%3E%3C/svg%3E"); }
html[data-skin="sand"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 14L16 6' stroke='%238a6420' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
html[data-skin="graphite"] body::before {
    content: '';
    position: fixed;
    left: 1.6rem;
    top: 2.6rem;
    width: 3rem;
    height: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M2 18V2H18' fill='none' stroke='%234b5567' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="graphite"] body::after {
    content: '';
    position: fixed;
    right: 1.6rem;
    bottom: 3rem;
    width: 3rem;
    height: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M28 12V28H12' fill='none' stroke='%234b5567' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: -1;
    pointer-events: none;
  }
html[data-skin="graphite"] #game-frame {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 0.14rem #3c4a63, 0 0.22rem 0 #14171c, 0 0.44rem 0 #101216, 0 0.7rem 1.2rem rgba(0, 0, 0, 0.45);
  }
html[data-skin="graphite"] #game-frame:not(.is-fullbleed) { border-radius: 1rem; }
html[data-skin="graphite"] #game-frame::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0.4rem;
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Crect y='3.4' width='24' height='1.2' fill='%238fb4f0'/%3E%3Crect x='0' y='0.6' width='1.2' height='6.8' fill='%238fb4f0'/%3E%3Crect x='12' y='1.8' width='1' height='4.4' fill='%235f7aa8'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 1.2rem 0.4rem;
    pointer-events: none;
  }
html[data-skin="graphite"] #game-header {
    background: var(--silver);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 0.2rem var(--silver), 0 0.2rem 0 0.2rem #8fb4f0;
  }
html[data-skin="graphite"] .brand-title { font-weight: 900; }
html[data-skin="graphite"] .pill-btn { box-shadow: 0 0.14rem 0 #8fb4f0; }
html[data-skin="graphite"] .lang-switch { box-shadow: 0 0.14rem 0 #8fb4f0; }
html[data-skin="graphite"] #stage-area {
    border-color: var(--ink);
    box-shadow: 0 0 0 0.14rem #3c4a63;
  }
html[data-skin="graphite"] #fixed-wardrobe-box {
    border-color: var(--ink);
    background-image: none;
    box-shadow: 0 0 0 0.14rem #3c4a63;
  }
html[data-skin="graphite"] .wing-btn { box-shadow: 0 0 0 0.14rem #1d2027, 0 0 0 0.26rem #8fb4f0; }
html[data-skin="graphite"] .round-btn { box-shadow: 0 0 0 0.14rem #1d2027, 0 0 0 0.26rem #8fb4f0; }
html[data-skin="graphite"] .page-tab-btn { border-color: #8c96a9; }
html[data-skin="graphite"] .page-tab-btn.active {
    border-color: var(--ink);
    background: #44506a;
    box-shadow: inset 0 0 0 0.16rem #8fb4f0;
  }
html[data-skin="graphite"] .independent-color-box,
html[data-skin="graphite"] .photo-modal-card,
html[data-skin="graphite"] .boot-card {
    border-color: var(--ink);
    border-radius: 0.9rem;
    box-shadow: 0 0 0 0.16rem #3c4a63, 0 0.4rem 1.1rem rgba(0, 0, 0, 0.45);
  }
html[data-skin="graphite"] .color-box-header {
    background: var(--silver);
    border-bottom-color: #8fb4f0;
    box-shadow: 0 0 0 0.3rem var(--silver);
  }
html[data-skin="graphite"] .btn-box-close { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 0.12rem #8fb4f0; }
html[data-skin="graphite"] .hair-chip { box-shadow: 0 0 0 0.16rem #8fb4f0, 0 0 0 0.3rem #1d2027; }
html[data-skin="graphite"] .bg-option canvas { border-color: #8c96a9; }
html[data-skin="graphite"] .bg-option.active canvas { border-color: var(--ink); outline: 0.16rem solid #8fb4f0; outline-offset: -0.32rem; }
html[data-skin="graphite"] #modal-photo-img { border-radius: 0.3rem; }
html[data-skin="graphite"] .skin-fx {
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
  }
html[data-skin="graphite"] .skin-fx.k0 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 4V16M4 10H16' stroke='%238fb4f0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
html[data-skin="graphite"] .skin-fx.k1 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3' fill='%238fb4f0' stroke='%231d2027' stroke-width='1.2'/%3E%3C/svg%3E"); }
html[data-skin="graphite"] .skin-fx.k2 { background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5L8.5 15 16 5' fill='none' stroke='%238fb4f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }