/* Piece colors and faces. */
.pc { display: block; width: 100%; height: 100%; overflow: visible; }
.pc--w { --fill: #fff5df; --line: #4b3322; --shade: #f2d9aa; --eye: #fff; --pupil: #2a1c12; --mouth: #7a3b2a; --cheek: #ff9aa8; --gold: #ffc93c; --gold-line: #9a6a0a; }
.pc--b { --fill: #4c4170; --line: #1d1833; --shade: #3a3159; --eye: #fff; --pupil: #1d1833; --mouth: #ffd5e2; --cheek: #ff7fa6; --gold: #ffc93c; --gold-line: #6b4a06; }
.pc .pc-body, .pc .pc-shade, .pc .pc-crown { stroke: var(--line); stroke-width: 3.2; stroke-linejoin: round; }
.pc .pc-body { fill: var(--fill); }
.pc .pc-shade { fill: var(--shade); }
.pc .pc-crown { fill: var(--gold); stroke: var(--gold-line); }
.pc .pc-gem { fill: #ff6fae; stroke: var(--gold-line); stroke-width: 2.2; }
.pc .pc-mane { fill: none; stroke: var(--shade); stroke-width: 5; stroke-linecap: round; }
.pc .pc-slit { fill: none; stroke: var(--line); stroke-width: 3.2; stroke-linecap: round; }
.pc .pc-eye { fill: var(--eye); stroke: var(--line); stroke-width: 1.6; }
.pc .pc-pupil { fill: var(--pupil); }
.pc .pc-nostril { fill: var(--line); }
.pc .pc-cheek { fill: var(--cheek); opacity: 0.55; }
.pc .pc-mouth { fill: none; stroke: var(--mouth); stroke-width: 2.4; stroke-linecap: round; }
.pc .pc-oh { fill: var(--mouth); stroke: none; display: none; }
.pc .pc-brow { fill: none; stroke: var(--line); stroke-width: 2.2; stroke-linecap: round; display: none; }
.pc--b .pc-brow { stroke: var(--mouth); }
.pc .pc-stache { fill: var(--line); }
.pc--b .pc-stache { fill: #cfc4f2; }
.pc .pc-eyes { transform-box: fill-box; transform-origin: center; animation: blink 6s infinite; animation-delay: var(--blink, 0s); }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }

/* In danger: wide eyes, eyebrows up, little "oh" mouth. */
.is-worried .pc .pc-happy { display: none; }
.is-worried .pc .pc-oh, .is-worried .pc .pc-brow { display: inline; }
.is-worried .pc .pc-cheek { opacity: 0; }