/* Original game art, shared with the Apple and Android screens. */
.game-art { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; flex:none; line-height:1; }
.game-art img { display:block; width:100%; height:100%; object-fit:contain; }
.bird-portrait { width:32px; height:32px; }
.raven-portrait { background:#e7dec8; border-radius:50%; }
.game-symbol { width:44px; height:44px; }
.game-logo { width:112px; height:112px; }
.hero-bird.small .game-logo { width:72px; height:72px; }
.avatar { width:36px; height:36px; }
.avatar > .bird-portrait { width:34px; height:34px; }
.col-label .bird-portrait { width:20px; height:20px; }
/* the people's faces (design/art/humans) and their chooser (Views.js faceButton) */
.face-button, button.plain.face-button { padding:2px; width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:none; cursor:pointer;
  background:rgb(var(--ink-rgb) / 0.08); border:1px solid rgb(var(--ink-rgb) / 0.25); }
button.plain.face-button:hover { border-color:rgb(var(--ink-rgb) / 0.6); }
.face-button > .bird-portrait { width:34px; height:34px; }
.face-grid { display:grid; grid-template-columns:repeat(4, 60px); gap:8px; justify-content:center; margin-top:12px; }
.face-grid.animals { grid-template-columns:repeat(5, 50px); gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid rgb(var(--ink-rgb) / 0.12); }
.face-grid.animals > .face-choice { width:50px; height:50px; padding:3px; }
.face-grid.animals > .face-choice > .bird-portrait { width:44px; height:44px; }
.face-choice { width:60px; height:60px; padding:4px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.face-choice > .bird-portrait { width:52px; height:52px; }
.face-choice.on { background:rgb(var(--ink-rgb) / 0.12); outline:2px solid var(--orange); }
.face-inline > .bird-portrait { width:1.3em; height:1.3em; vertical-align:-0.3em; }
.face-inline > .prize-inline { width:1.4em; height:1.4em; vertical-align:-0.35em; }
.hero-bird .game-symbol, .boot-bird .game-symbol { width:72px; height:72px; }
.boot-bird > img { width:72px; height:72px; object-fit:contain; }
.card-back > .game-symbol { width:28px; height:28px; }
.tiny-prize b { font-size:11px; }
@media (max-width:520px) {
  .game-logo { width:88px; height:88px; }
  .face-grid { grid-template-columns:repeat(4, 54px); gap:6px; }
  .face-choice { width:54px; height:54px; }
  .face-choice > .bird-portrait { width:46px; height:46px; }
  .avatar { width:32px; height:32px; }
  .avatar > .bird-portrait { width:30px; height:30px; }
  .prize-card .game-symbol { width:32px; height:32px; }
}