/* Adapted from samples/esbrain-town-style-sample.html. */
:root {
  --tl: 0%;      /* 明度オフセット */
  --th: 0;       /* 色相オフセット */
  --ts: 0%;      /* 彩度オフセット */
  --win: #bcd8ef;         /* 窓ガラス */
  --lamp: 0;              /* 街灯の光 */
  --stars: 0;             /* 星 */
  --amb: #ffffff;         /* 空気の色 */
  --amb-o: 0;
  --sky1: #6fc3ef; --sky2: #d8f0ff;
  --shadow-o: .22;
}
body.tod-day {   /* 昼の配色（現在はこの1種類だけを使用） */
  --tl: 0%; --th: 0; --ts: 0%;
  --win: #bcd8ef; --lamp: 0; --stars: 0;
  --amb: #ffffff; --amb-o: 0;
  --sky1: #6fc3ef; --sky2: #d8f0ff; --shadow-o: .22;
}

.face-top { fill: hsl(calc(var(--h) + var(--th)) calc(var(--s) + var(--ts)) calc(var(--l) + var(--tl) + 9%)); }
.face-r   { fill: hsl(calc(var(--h) + var(--th)) calc(var(--s) + var(--ts)) calc(var(--l) + var(--tl) - 1%)); }
.face-l   { fill: hsl(calc(var(--h) + var(--th)) calc(var(--s) + var(--ts)) calc(var(--l) + var(--tl) - 15%)); }
.tile     { fill: hsl(calc(var(--h) + var(--th)) calc(var(--s) + var(--ts)) calc(var(--l) + var(--tl)));
            stroke: hsl(calc(var(--h) + var(--th)) calc(var(--s) + var(--ts)) calc(var(--l) + var(--tl) - 6%));
            stroke-width: .5; }
.shadow   { fill: #13203a; opacity: var(--shadow-o); }
.win      { fill: var(--win); opacity: .92; transition: fill .6s ease; }
.glow     { opacity: var(--lamp); transition: opacity .6s ease; }
.stars    { opacity: var(--stars); transition: opacity .6s ease; }
.amb      { fill: var(--amb); opacity: var(--amb-o); transition: opacity .6s ease, fill .6s ease; pointer-events: none; }

/* --- 動くもの ------------------------------------------------------------ */
@keyframes bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wave   { 0%,100% { transform: skewY(0deg); }  50% { transform: skewY(-5deg); } }
@keyframes walkA  { 0% { transform: translate(0,0); } 50% { transform: translate(256px,128px); } 100% { transform: translate(0,0); } }
@keyframes walkB  { 0% { transform: translate(0,0); } 50% { transform: translate(-192px,96px); } 100% { transform: translate(0,0); } }
@keyframes step   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes twinkle{ 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.balloon { animation: bob 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.flag    { animation: wave 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
.npcA    { animation: walkA 22s ease-in-out infinite; }
.npcB    { animation: walkB 18s ease-in-out infinite; }
.npc-in  { animation: step 700ms ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
.star    { animation: twinkle 3.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .balloon, .flag, .npcA, .npcB, .npc-in, .star { animation: none !important; }
}