/* dev2の白・シアン配色。キャラクターのtheme: "cyan"で有効になる。配置・寸法は共通CSSを使う。 */
html[data-ui-theme="cyan"] {
  color-scheme: light;
  --ink: #102c38;
  --muted: #344f5d;
  --accent: #007f99;
  --accent-ink: #00566a;
  --cyan: #00a6c3;
  --line: #dce8ec;
  --control-line: #6a909e;
  --surface: #fff;
  --tint: #eaf8fc;
  --status-surface: rgba(255, 255, 255, .35);
  --status-surface-immersive: linear-gradient(rgba(255, 255, 255, .78), rgba(234, 248, 252, .82));
  --wood: #eaf8fc;
  --paper: var(--ink);
  --amber: var(--accent);
  --amber2: var(--accent-ink);
  --danger: #9a2f43;
}

html[data-ui-theme="cyan"],
:where(html[data-ui-theme="cyan"]) body {
  color: var(--ink); background-color: #f4f9fb;
}

:where(html[data-ui-theme="cyan"]) body {
  background-color: #e5f3f8;
  background-image:
    radial-gradient(ellipse at 12% 20%, rgba(0, 166, 195, .18), transparent 48%),
    radial-gradient(ellipse at 88% 80%, rgba(0, 127, 153, .12), transparent 46%),
    repeating-linear-gradient(135deg, rgba(0, 127, 153, .045) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, #eef9fc, #dceff5);
  background-attachment: fixed;
}

:where(html[data-ui-theme="cyan"]) h1 {
  color: var(--ink);
}

:where(html[data-ui-theme="cyan"]) .subtitle,
:where(html[data-ui-theme="cyan"]) .notice,
:where(html[data-ui-theme="cyan"]) footer {
  color: var(--muted);
}

:where(html[data-ui-theme="cyan"]) .character {
  border-color: var(--line);
  background-image: linear-gradient(145deg, #fff, #eaf8fc);
  box-shadow: 0 12px 32px rgba(25, 52, 63, .1);
}

:where(html[data-ui-theme="cyan"]) .character h2 {
  color: var(--accent-ink);
}

:where(html[data-ui-theme="cyan"]) .start {
  color: #fff;
  border-color: var(--accent-ink);
  background-color: var(--accent-ink);
}

:where(html[data-ui-theme="cyan"]) .languages button {
  color: var(--accent-ink);
  border-color: var(--control-line);
  background-color: var(--surface);
}

:where(html[data-ui-theme="cyan"]) #app {
  background-image: radial-gradient(1200px 400px at 50% -10%, #eaf8fc 0%, transparent 50%), linear-gradient(#f8fcfd, #f4f9fb);
}

:where(html[data-ui-theme="cyan"]) .topbar {
  color: var(--muted);
}

:where(html[data-ui-theme="cyan"]) .hud-note,
:where(html[data-ui-theme="cyan"]) .glass .tag {
  color: var(--ink);
}

:where(html[data-ui-theme="cyan"]) .cg {
  border-color: var(--line);
  background-image: radial-gradient(ellipse, #eaf8fc, #f4f9fb 72%);
  box-shadow: 0 8px 24px rgba(25, 52, 63, .12);
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .cg {
  background-color: #f4f9fb;
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .topbar {
  background-image: linear-gradient(rgba(255, 255, 255, .64), rgba(234, 248, 252, .56));
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .topbar-status,
:where(html[data-ui-theme="cyan"]) #app.art-immersive .glass,
:where(html[data-ui-theme="cyan"]) #app.art-immersive .glass .tag {
  color: var(--ink);
  text-shadow: 0 1px 3px rgba(255, 255, 255, .98), 0 0 7px rgba(255, 255, 255, .9);
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .advbox .txt {
  color: var(--ink);
  text-shadow: 0 1px 3px rgba(255, 255, 255, .98), 0 0 8px rgba(255, 255, 255, .9);
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .glass .tag {
  color: var(--ink);
  text-shadow: -.5px 0 1px #fff, .5px 0 1px #fff, 0 -.5px 1px #fff, 0 .5px 1px #fff;
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .stage {
  background-color: transparent;
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .meter,
:where(html[data-ui-theme="cyan"]) #app.art-immersive .advbox,
:where(html[data-ui-theme="cyan"]) #app.art-immersive .glass {
  background-color: transparent;
  background-image: var(--status-surface-immersive);
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .advbox .who {
  text-shadow: 0 1px 4px #fff, 0 0 8px rgba(255, 255, 255, .9);
}

:where(html[data-ui-theme="cyan"]) .meter {
  background-color: var(--status-surface);
  background-image: none;
  border-color: var(--line);
  text-shadow: 0 1px 2px #fff, 0 0 5px rgba(255, 255, 255, .9);
}

:where(html[data-ui-theme="cyan"]) .inventory-chip {
  color: var(--ink);
  border-color: var(--line);
  background-color: rgba(234, 248, 252, .35);
}

:where(html[data-ui-theme="cyan"]) .bar {
  background-color: #dce8ec;
}

:where(html[data-ui-theme="cyan"]) .bar.drunk > i {
  background-image: linear-gradient(90deg, var(--cyan), var(--danger));
}

:where(html[data-ui-theme="cyan"]) .bar.cloth > i {
  background-image: linear-gradient(90deg, #23785f, #54a48b);
}

:where(html[data-ui-theme="cyan"]) .glass {
  color: var(--ink); border-color: var(--control-line);
  background-color: var(--status-surface); background-image: none;
}

:where(html[data-ui-theme="cyan"]) .glass.target {
  box-shadow: inset 0 0 0 2px #23785f, inset 0 0 12px rgba(35, 120, 95, .2);
}

:where(html[data-ui-theme="cyan"]) .glass.selected-target {
  box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 12px rgba(0, 166, 195, .24);
}

:where(html[data-ui-theme="cyan"]) .glass .shot {
  border-color: var(--accent-ink); background-image: linear-gradient(#d5f3fa, #8ed8e8);
}

:where(html[data-ui-theme="cyan"]) .glass.used .shot {
  border-color: var(--control-line);
}

:where(html[data-ui-theme="cyan"]) .item {
  color: var(--ink); border-color: var(--control-line);
  background-color: rgba(255, 255, 255, .35);
}

:where(html[data-ui-theme="cyan"]) .item.sel,
:where(html[data-ui-theme="cyan"]) .item-option.selected {
  color: var(--accent-ink); background-color: rgba(222, 244, 250, .68);
}

:where(html[data-ui-theme="cyan"]) .selection-footer {
  background-color: rgba(255, 255, 255, .35);
}

:where(html[data-ui-theme="cyan"]) .advbox {
  background-color: var(--status-surface); background-image: none; border-color: var(--line);
}

:where(html[data-ui-theme="cyan"]) #app.art-immersive .advbox {
  box-shadow: 0 -8px 28px rgba(25, 52, 63, .24);
}

:where(html[data-ui-theme="cyan"]) .btn {
  color: #fff;
  border-color: var(--accent-ink);
  background-image: linear-gradient(#007f99, #006b84);
}

:where(html[data-ui-theme="cyan"]) .btn.sub {
  color: var(--accent-ink);
  border-color: var(--control-line);
  background-color: var(--surface);
  background-image: none;
}

:where(html[data-ui-theme="cyan"]) .btn.danger {
  color: var(--danger);
  border-color: var(--danger);
  background-image: linear-gradient(#fff7f9, #fcecf0);
}

:where(html[data-ui-theme="cyan"]) .logbtn,
:where(html[data-ui-theme="cyan"]) .log-close,
:where(html[data-ui-theme="cyan"]) .lang-switch button {
  color: var(--accent-ink);
  border-color: var(--control-line);
  background-color: var(--surface);
}

:where(html[data-ui-theme="cyan"]) .lang-switch button {
  background-color: rgba(255, 255, 255, .9);
}

:where(html[data-ui-theme="cyan"]) .btn.item-option {
  color: var(--ink);
  border-color: var(--control-line);
  background-color: rgba(255, 255, 255, .35);
  background-image: none;
  text-shadow: 0 1px 2px #fff, 0 0 5px rgba(255, 255, 255, .9);
}

:where(html[data-ui-theme="cyan"]) .btn.item-option.selected {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  background-color: rgba(222, 244, 250, .68);
}

:where(html[data-ui-theme="cyan"]) .titlewrap {
  color: #f4f9fb;
  /* 画像URLはHTML側の背景指定で解決し、CSSのディレクトリを基準にしない。 */
  --title-overlay: linear-gradient(180deg, rgba(25, 52, 63, .18), rgba(25, 52, 63, .42) 48%, rgba(25, 52, 63, .94));
}

:where(html[data-ui-theme="cyan"]) .logo {
  color: #fff; text-shadow: 0 4px 18px rgba(25, 52, 63, .6);
}

:where(html[data-ui-theme="cyan"]) .logo small {
  color: #dce8ec;
}

:where(html[data-ui-theme="cyan"]) .title-teaser,
:where(html[data-ui-theme="cyan"]) .title-notice {
  color: #f4f9fb; text-shadow: 0 2px 8px #19343f;
}

:where(html[data-ui-theme="cyan"]) .title-notice a {
  color: #8ae0ef;
}

:where(html[data-ui-theme="cyan"]) .overlay {
  background-color: rgba(25, 52, 63, .72);
}

:where(html[data-ui-theme="cyan"]) .modal {
  background-color: rgba(255, 255, 255, .82); border-color: var(--control-line);
}

:where(html[data-ui-theme="cyan"]) .modal p {
  color: var(--ink);
}

:where(html[data-ui-theme="cyan"]) .log-content b[style] {
  color: var(--accent-ink) !important;
}

:where(html[data-ui-theme="cyan"]) .fx {
  color: #eaf8fc;
}

:where(html[data-ui-theme="cyan"]) .fx .sub {
  color: #fff;
}

:where(html[data-ui-theme="cyan"]) #mixov .mix-modal {
  background-color: rgba(255, 255, 255, .82);
  border-color: var(--control-line);
  box-shadow: 0 24px 64px rgba(25, 52, 63, .2);
}

:where(html[data-ui-theme="cyan"]) #mixov .mix-kicker,
:where(html[data-ui-theme="cyan"]) #mixov .mix-context,
:where(html[data-ui-theme="cyan"]) #mixov .mix-dose-label,
:where(html[data-ui-theme="cyan"]) #mixov .mix-footnote {
  color: var(--muted);
}

:where(html[data-ui-theme="cyan"]) #mixov h3,
:where(html[data-ui-theme="cyan"]) #mixov .mix-total,
:where(html[data-ui-theme="cyan"]) #mixov .mix-name {
  color: var(--ink);
}

:where(html[data-ui-theme="cyan"]) #mixov .mix-quantity {
  color: var(--accent-ink);
}

:where(html[data-ui-theme="cyan"]) #mixov .mix-card {
  --drink-color: var(--accent-ink); border-color: var(--line); background-color: rgba(234, 248, 252, .35);
}

:where(html[data-ui-theme="cyan"]) #mixov .mix-card.safe {
  --drink-color: #185d48;
}

:where(html[data-ui-theme="cyan"]) #mixov .mix-card.strong {
  --drink-color: var(--danger);
}

:where(html[data-ui-theme="cyan"]) #mixov .mix-bottle::before {
  background-color: rgba(234, 248, 252, .35);
}

:where(html[data-ui-theme="cyan"]) .round-start-cutin {
  background-color: rgba(25, 52, 63, .7);
}

:where(html[data-ui-theme="cyan"]) .round-start-frame {
  color: var(--ink); background-color: var(--surface); border-color: var(--accent-ink);
  box-shadow: 0 10px 25px rgba(25, 52, 63, .25);
}

:where(html[data-ui-theme="cyan"]) .round-start-frame::before {
  border-color: rgba(0, 127, 153, .6);
}

:where(html[data-ui-theme="cyan"]) .round-start-title {
  text-shadow: 0 4px 8px #fff, 0 0 15px #fff;
}

:where(html[data-ui-theme="cyan"]) .round-start-subtitle {
  color: var(--accent-ink); text-shadow: 0 2px 4px #fff;
}

:where(html[data-ui-theme="cyan"]) .image-viewer {
  color: var(--ink); background-color: rgba(244, 249, 251, .97);
}

:where(html[data-ui-theme="cyan"]) .image-viewer span {
  color: var(--ink); background-color: rgba(255, 255, 255, .62);
}

:where(html[data-ui-theme="cyan"]) #app > p[style] {
  color: var(--ink) !important;
}

/* 一覧ではユウカのカードだけを同じ配色にする。 */
.character[data-character="yuuka"] {
  color: #102c38;
  border-color: #dce8ec;
  background-image: linear-gradient(145deg, #fff, #eaf8fc);
  box-shadow: 0 12px 32px rgba(25, 52, 63, .1);
}
.character[data-character="yuuka"]:hover,
.character[data-character="yuuka"]:focus-visible { border-color: #007f99; }
.character[data-character="yuuka"] h2 { color: #00566a; }
.character[data-character="yuuka"] .start {
  color: #fff;
  border-color: #00566a;
  background-color: #00566a;
}