/* App logo: placeholder drawn in CSS until the official asset exists.
   Drawn on a 96px tile, scaled down with --logo-scale (40px = .4167, 36px = .375). */
.logo-mark,
.logo-mark span {
    display: block;
}

.logo-mark {
    flex: none;
    width: calc(96px * var(--logo-scale, .4167));
    height: calc(96px * var(--logo-scale, .4167));
}

.logo-mark__tile {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: var(--coral);
    transform: scale(var(--logo-scale, .4167));
    transform-origin: 0 0;
}

.logo-mark__crown {
    position: absolute;
    left: 30px;
    top: 9px;
    width: 32px;
    height: 20px;
    background: var(--gold);
    clip-path: polygon(0 100%, 0 22%, 25% 62%, 50% 0, 75% 62%, 100% 22%, 100% 100%);
    transform: rotate(-10deg);
}

.logo-mark__question {
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    text-align: center;
    font: 900 66px/1 var(--font-serif);
    color: var(--white);
}

/* Kiwi slice: dark ring, green flesh, pale core, and a ring of seeds on top. */
.logo-mark__kiwi {
    position: absolute;
    left: 34px;
    top: 63px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
}

.logo-mark__kiwi::before,
.logo-mark__kiwi::after {
    content: "";
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
}

.logo-mark__kiwi::before {
    background: radial-gradient(circle, var(--paper) 0 22%, var(--kiwi) 23%);
}

.logo-mark__kiwi::after {
    background: repeating-conic-gradient(var(--ink) 0 8deg, transparent 8deg 45deg);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 32% 50%, transparent 52%);
    mask: radial-gradient(circle, transparent 30%, #000 32% 50%, transparent 52%);
}