/* =====================================================================
   Car Show Bingo — loaded on top of the hub's shared site.css.

   The card keeps its own cream/red/navy car-show palette and just borrows
   the site's fonts, so it reads as a printed card sitting on the dark page.

   Two rules make that safe:

   1. NO :root BLOCK. This app's original tokens included --paper, --ink and
      --shadow, which site.css also defines with the *opposite* meanings
      (--paper is the dark page bg there, --ink is cream text). A :root block
      here would wreck the header, footer and every other page component.
      Every token is therefore prefixed --csb- and scoped to .csb.
   2. NO WEIGHTS ABOVE WHAT THE FONTS SHIP. Special Elite is 400 only and
      IBM Plex Mono is 400/500/600 only; anything heavier gets a smeared
      synthetic bold. Real bold lives on --font-sans, which has the range.

   Reset, box-sizing and .sr-only all come from site.css — not repeated here.
   ===================================================================== */

.csb {
    /* Retro car-show palette (unchanged values, collision-proof names) */
    --csb-cream: #f5eddc;
    --csb-card: #fffaf0;
    --csb-red: #991f27;
    --csb-red-dark: #6f131a;
    --csb-navy: #11263b;
    --csb-navy-light: #25425d;
    --csb-text: #15191c;
    --csb-chrome: #c7cbd0;
    --csb-chrome-dark: #777f87;
    --csb-gold: #d49b2e;
    --csb-focus: #1261a0;
    --csb-shadow: 0 15px 35px rgb(21 25 28 / 18%);

    /* site.css sets body line-height 1.65; the card wants its tighter rhythm */
    font-family: var(--font-sans);
    line-height: 1.45;
}

.csb button {
    font: inherit;
}

/* Gold-on-cream (site.css's :focus-visible) is too low-contrast inside the
   card. This selector's specificity beats the site's bare :focus-visible. */
.csb button:focus-visible,
.instructions:focus-visible,
.instructions button:focus-visible {
    outline: 4px solid var(--csb-focus);
    outline-offset: 3px;
}

/* ---- The cream panel the whole game sits on ------------------------ */
.csb-shell {
    overflow: hidden; /* clips the checker band to the rounded top corners */
    border-radius: var(--radius-lg);
    color: var(--csb-text);
    background: var(--csb-cream);
    box-shadow: var(--shadow-lg);
}

.csb-shell__band {
    height: 15px;
    border-bottom: 3px solid var(--csb-red);
    background:
        conic-gradient(
            var(--csb-navy) 0 25%,
            var(--csb-card) 0 50%,
            var(--csb-navy) 0 75%,
            var(--csb-card) 0
        ) 0 0 / 16px 16px;
}

.csb-shell__inner {
    padding:
        clamp(1rem, 4vw, 2rem)
        max(clamp(0.75rem, 2.5vw, 1.5rem), env(safe-area-inset-right))
        clamp(1.25rem, 4vw, 2rem)
        max(clamp(0.75rem, 2.5vw, 1.5rem), env(safe-area-inset-left));
}

/* ---- Masthead ------------------------------------------------------- */
.masthead {
    position: relative;
    margin-bottom: clamp(0.9rem, 3vw, 1.4rem);
    text-align: center;
}

.masthead::before,
.masthead::after {
    content: "";
    position: absolute;
    top: 46%;
    width: clamp(20px, 7vw, 54px);
    height: 5px;
    border-block: 1px solid var(--csb-navy);
    background: var(--csb-red);
}

.masthead::before {
    left: 0;
}

.masthead::after {
    right: 0;
}

.masthead__eyebrow,
.instructions__kicker {
    margin: 0 0 0.35rem;
    color: var(--csb-red);
    font-family: var(--font-mono);
    font-size: clamp(0.62rem, 2.2vw, 0.76rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Special Elite is wider and looser than the Impact this used to be, so the
   display sizes come down and the uppercase/chrome-shadow poster treatment
   (which depended on Impact's solidity) is dialled back to a soft offset. */
.masthead h1 {
    margin: 0;
    color: var(--csb-navy);
    font-family: var(--font-type);
    font-size: clamp(1.9rem, 7vw, 3.2rem);
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.02;
    text-shadow: 2px 2px 0 rgb(199 203 208 / 70%);
}

.masthead h1 span {
    color: var(--csb-red);
}

.masthead__subtitle {
    max-width: 35rem;
    margin: 0.6rem auto 0;
    color: var(--csb-navy-light);
    font-size: clamp(0.83rem, 2.8vw, 0.98rem);
    font-weight: 600;
}

/* ---- The card ------------------------------------------------------- */
.game-card {
    position: relative;
    padding: clamp(0.5rem, 2vw, 1rem);
    border: 3px solid var(--csb-navy);
    border-radius: 16px;
    background: var(--csb-card);
    box-shadow: var(--csb-shadow), inset 0 0 0 3px var(--csb-chrome);
}

.game-card::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: 0;
    border: 1px solid rgb(119 127 135 / 45%);
    border-radius: 9px;
    pointer-events: none;
}

.game-card > * {
    position: relative;
    z-index: 1;
}

.dashboard {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.2rem 0 0.45rem;
    padding-inline: 0.2rem;
}

.dashboard__item {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin: 0;
    color: var(--csb-navy);
    font-size: clamp(0.78rem, 2.7vw, 0.95rem);
}

.dashboard__label {
    color: var(--csb-chrome-dark);
    font-family: var(--font-mono);
    font-size: 0.74em;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* VT323 as a little dashboard readout. It runs small for its em size, hence
   the bump; it's already monospaced so tabular-nums is redundant. */
.dashboard strong {
    font-family: var(--font-terminal);
    font-size: 1.35em;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1;
}

.bingo-letters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(3px, 1vw, 7px);
    margin-bottom: 0.3rem;
    color: var(--csb-red);
    font-family: var(--font-type);
    font-size: clamp(1rem, 4vw, 1.6rem);
    line-height: 1.15;
    text-align: center;
}

.bingo-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(3px, 1vw, 7px);
    width: 100%;
}

.bingo-square {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    padding: clamp(0.16rem, 0.8vw, 0.45rem);
    overflow: hidden;
    border: 2px solid var(--csb-navy);
    border-radius: clamp(5px, 1.4vw, 9px);
    color: var(--csb-navy);
    background:
        linear-gradient(145deg, rgb(255 255 255 / 75%), transparent 55%),
        var(--csb-card);
    box-shadow: inset 0 -3px 0 rgb(17 38 59 / 10%);
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 120ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.bingo-square:not(:disabled):active {
    transform: scale(0.96);
}

@media (hover: hover) {
    .bingo-square:not(:disabled):hover {
        border-color: var(--csb-red);
        box-shadow: inset 0 -3px 0 rgb(153 31 39 / 15%), 0 3px 7px rgb(17 38 59 / 16%);
    }
}

/* Stays on --font-sans: the system stack has a real 700, and at this size it's
   far more legible in a 5-across cell than a mono or typewriter face.

   The system stack is wider than the Trebuchet MS this used to be (much wider
   on Linux, where it lands on DejaVu Sans), and a square is a fixed 1:1 box
   with overflow hidden — so the longest prompts clipped. script.js tags each
   label with a data-len bucket and the two rules below step the type down for
   just those, keeping the short labels at full size. */
.square__label {
    position: relative;
    z-index: 2;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--font-sans);
    font-size: clamp(0.53rem, 2.25vw, 0.86rem);
    font-weight: 700;
    hyphens: auto;
    line-height: 1.05;
    text-align: center;
}

.square__label[data-len="lg"] {
    font-size: clamp(0.49rem, 2.05vw, 0.79rem);
}

.square__label[data-len="xl"] {
    font-size: clamp(0.45rem, 1.85vw, 0.72rem);
    letter-spacing: -0.01em;
}

.square__mark {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 3;
    display: none;
    width: clamp(15px, 4.4vw, 25px);
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid currentcolor;
    border-radius: 50%;
    background: var(--csb-card);
    font-family: var(--font-sans);
    font-size: clamp(0.62rem, 2.5vw, 0.92rem);
    font-weight: 700;
    line-height: 1;
}

.bingo-square.is-marked {
    border-color: var(--csb-red-dark);
    color: var(--csb-card);
    background:
        repeating-linear-gradient(-45deg, transparent 0 7px, rgb(255 255 255 / 5%) 7px 9px),
        var(--csb-red);
    box-shadow: inset 0 0 0 2px rgb(255 250 240 / 25%);
}

.bingo-square.is-marked .square__label {
    padding-inline: 0.08rem;
    text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
}

.bingo-square.is-marked .square__mark {
    display: grid;
    color: var(--csb-red-dark);
}

/* Armed: tapped once while marked, one more tap from being cleared. It has to
   read as "about to be taken away" and stay clearly apart from .is-winning's
   solid gold outline, so it's a dashed outline plus a breathing animation —
   two signals, neither of them colour alone. */
.bingo-square.is-armed {
    outline: 3px dashed var(--csb-gold);
    outline-offset: -5px;
    animation: arm-breathe 1.4s ease-in-out infinite;
}

.bingo-square.is-armed .square__mark {
    display: grid;
    border-color: var(--csb-red-dark);
    color: var(--csb-red-dark);
    background: var(--csb-gold);
}

/* An armed square outranks a winning one: the outline that matters is the one
   describing what the next tap does. */
.bingo-square.is-winning.is-armed {
    outline-style: dashed;
}

.bingo-square.is-winning {
    outline: 3px solid var(--csb-gold);
    outline-offset: -5px;
}

.bingo-square.is-free {
    border-color: var(--csb-navy);
    color: var(--csb-card);
    background:
        radial-gradient(circle, rgb(255 255 255 / 15%) 0 2px, transparent 3px) 0 0 / 10px 10px,
        var(--csb-navy);
    cursor: default;
    opacity: 1;
}

.bingo-square.is-free .square__label {
    font-family: var(--font-type);
    font-size: clamp(0.6rem, 2.9vw, 1.05rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bingo-square.is-free .square__mark {
    color: var(--csb-navy);
}

/* Holds its height whether or not it has text, so arming a square doesn't
   shove the board up the page mid-tap. */
.board-hint {
    min-height: 1.6em;
    margin: 0.45rem 0 0;
    padding-inline: 0.3rem;
    color: var(--csb-red-dark);
    font-family: var(--font-mono);
    font-size: clamp(0.66rem, 2.4vw, 0.8rem);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

/* ---- Win state ------------------------------------------------------ */
.bingo-message {
    margin-top: 0.75rem;
    padding: clamp(0.7rem, 3vw, 1rem);
    border: 2px solid var(--csb-gold);
    border-radius: 10px;
    color: var(--csb-card);
    background: var(--csb-navy);
    box-shadow: inset 0 0 0 2px rgb(255 250 240 / 16%);
    text-align: center;
}

.bingo-message[hidden] {
    display: none;
}

.bingo-message__stamp {
    display: inline-block;
    margin-bottom: 0.3rem;
    padding: 0.1rem 0.6rem;
    border: 3px double var(--csb-card);
    color: var(--csb-card);
    font-family: var(--font-type);
    font-size: clamp(1.15rem, 4.5vw, 1.9rem);
    letter-spacing: 0.06em;
    line-height: 1.1;
    transform: rotate(-2deg);
}

.bingo-message p {
    max-width: 34rem;
    margin: 0 auto;
    font-size: clamp(0.8rem, 2.7vw, 0.96rem);
}

.bingo-message.is-celebrating {
    animation: victory-pulse 600ms ease-out;
}

/* ---- Controls ------------------------------------------------------- */
/* Four buttons across a 320px phone is unreadable, so they block up 2x2 and
   only go single-row once there's width for it. */
.controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 1rem;
}

@media (min-width: 560px) {
    .controls {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.control-button {
    min-height: 48px;
    padding: 0.65rem 0.55rem;
    border: 2px solid var(--csb-navy);
    border-radius: 8px;
    color: var(--csb-navy);
    background: var(--csb-card);
    box-shadow: 0 4px 0 var(--csb-navy);
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 2.8vw, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 120ms ease, box-shadow 120ms ease, color 120ms ease, background-color 120ms ease;
}

.control-button:hover {
    color: var(--csb-red);
}

.control-button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--csb-navy);
}

/* Lit once there's a line on the board — a nudge at the one moment there's a
   result worth sending, without promoting Share over New Card the rest of the
   time. */
.control-button.is-hot {
    border-color: var(--csb-gold);
    box-shadow: 0 4px 0 var(--csb-gold);
}

.control-button--primary {
    border-color: var(--csb-red-dark);
    color: var(--csb-card);
    background: var(--csb-red);
    box-shadow: 0 4px 0 var(--csb-red-dark);
}

.control-button--primary:hover {
    color: var(--csb-card);
    background: var(--csb-red-dark);
}

.road-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 1.4rem auto 0;
    color: var(--csb-navy-light);
    font-family: var(--font-mono);
    font-size: clamp(0.68rem, 2.4vw, 0.8rem);
    font-weight: 500;
    text-align: center;
}

.road-sign p {
    margin: 0;
}

.road-sign span {
    color: var(--csb-red);
}

.noscript-message {
    margin-top: 1rem;
    padding: 1rem;
    border: 2px solid var(--csb-red);
    color: var(--csb-red-dark);
    background: var(--csb-card);
    font-family: var(--font-sans);
    font-weight: 700;
    text-align: center;
}

/* ---- Dialogs (instructions + clear confirmation) --------------------
   Both live outside .csb in the DOM (the top layer moves them anyway), so
   they carry their own copy of the tokens they need. --csb-navy-light and
   --csb-chrome-dark are here for the confirmation's tally readout. */
.instructions {
    --csb-card: #fffaf0;
    --csb-red: #991f27;
    --csb-red-dark: #6f131a;
    --csb-navy: #11263b;
    --csb-navy-light: #25425d;
    --csb-text: #15191c;
    --csb-chrome: #c7cbd0;
    --csb-chrome-dark: #777f87;
    --csb-focus: #1261a0;

    /* A modal <dialog> is centered by the UA's `margin: auto` against its
       zeroed insets — and site.css line 86 is `* { margin: 0 }`, which wipes
       exactly that and drops the panel in the top-left corner. Centering is
       therefore restored by hand. height/inset are spelled out too so this
       doesn't lean on the rest of the UA rule surviving the same reset.
       z-index is inert for showModal (the top layer outranks it) and only
       matters on the legacy `open` attribute fallback. */
    position: fixed;
    inset: 0;
    z-index: 200;
    height: fit-content;
    margin: auto;

    width: min(calc(100% - 2rem), 520px);
    max-height: min(85vh, 640px);
    max-height: min(85dvh, 640px);
    padding: clamp(1.1rem, 5vw, 2rem);
    overflow: auto;
    border: 3px solid var(--csb-navy);
    border-radius: 14px;
    color: var(--csb-text);
    background: var(--csb-card);
    box-shadow: 0 24px 70px rgb(0 0 0 / 45%), inset 0 0 0 3px var(--csb-chrome);
    font-family: var(--font-sans);
    line-height: 1.45;
}

.instructions::backdrop {
    background: rgb(9 20 31 / 75%);
    backdrop-filter: blur(2px);
}

.instructions__header {
    padding-bottom: 0.7rem;
    border-bottom: 5px solid var(--csb-red);
}

.instructions h2 {
    margin: 0;
    color: var(--csb-navy);
    font-family: var(--font-type);
    font-size: clamp(1.5rem, 6.5vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.05;
}

.instructions ol {
    display: grid;
    gap: 0.75rem;
    margin: 1.25rem 0 1.5rem;
    padding-left: 1.7rem;
}

.instructions li {
    padding-left: 0.25rem;
    font-weight: 600;
}

.instructions li::marker {
    color: var(--csb-red);
    font-weight: 700;
}

.instructions .control-button {
    width: 100%;
}

/* ---- Clear-board confirmation --------------------------------------
   Same cream panel as the instructions, sized down to a question. */
.instructions--confirm {
    width: min(calc(100% - 2rem), 460px);
}

.instructions__body {
    margin: 1.2rem 0 0;
    font-weight: 500;
}

/* "New Card" here names the button beside it, so it gets the button's red
   rather than an italic that would read as ordinary emphasis. */
.instructions__body em {
    color: var(--csb-red);
    font-style: normal;
    font-weight: 700;
}

/* ---- Share panel ----------------------------------------------------
   The emoji grid is the one place in the game where the card is drawn at a
   glance, so it gets room to breathe and a monospace box to sit square in. */
.share-grid {
    margin: 1rem 0 0;
    font-family: var(--font-mono);
    font-size: clamp(0.95rem, 4.2vw, 1.25rem);
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: center;
    white-space: pre;
}

.share-text__label {
    display: block;
    margin: 0.9rem 0 0.3rem;
    color: var(--csb-chrome-dark);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Readonly, but still selectable: it's the manual fallback when neither the
   share sheet nor the clipboard is available. */
/* Fine print rather than a second display: the grid above is the thing you
   look at, this is the literal payload, kept small so the panel still fits
   inside .instructions' max-height with the buttons above the fold. */
.share-text {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 2px dashed var(--csb-chrome);
    border-radius: 8px;
    color: var(--csb-text);
    background: #fff;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.4;
    resize: vertical;
}

.instructions--share .instructions__actions {
    margin-top: 1rem;
}

/* With no navigator.share the sheet button is hidden, and a two-column grid
   would leave Copy stranded in half the panel. */
.instructions__actions.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.share-done {
    width: 100%;
    margin-top: 0.55rem;
}

/* Reuses the card's dashboard readout, boxed like a torn-off stub. */
.confirm-tally {
    margin: 1.1rem 0 0;
    padding: 0.5rem 0.85rem;
    border: 2px dashed var(--csb-chrome);
    border-radius: 8px;
}

.instructions__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 1.5rem;
}

/* Under ~340px the two answers stop fitting side by side; stack them with
   the safe one on top so it stays nearest the thumb. */
@media (max-width: 360px) {
    .instructions__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

body.dialog-open {
    overflow: hidden;
}

/* ---- Confetti ------------------------------------------------------- */
.confetti {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow: hidden;
    pointer-events: none;
}

.confetti__piece {
    position: absolute;
    top: -10vh;
    left: var(--x);
    width: 10px;
    height: 18px;
    border-radius: 2px;
    background: var(--color);
    opacity: 0;
    animation: confetti-fall var(--duration) var(--delay) cubic-bezier(0.15, 0.65, 0.4, 1) forwards;
}

@keyframes victory-pulse {
    0% { transform: scale(0.97); }
    55% { transform: scale(1.015); }
    100% { transform: scale(1); }
}

/* Deliberately small: it has to catch the eye without making the square look
   like it's already leaving. Killed outright by the reduced-motion block. */
@keyframes arm-breathe {
    0%, 100% { outline-offset: -5px; }
    50% { outline-offset: -9px; }
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translate3d(0, -5vh, 0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift), 115vh, 0) rotate(var(--spin));
    }
}

/* ---- Narrow phones -------------------------------------------------- */
@media (max-width: 390px) {
    /* The board wants every pixel it can get at this width, and the site's
       default gutter is generous for a full-bleed card. */
    .csb .container {
        padding-inline: 0.6rem;
    }

    .csb-shell__inner {
        padding-left: max(0.6rem, env(safe-area-inset-left));
        padding-right: max(0.6rem, env(safe-area-inset-right));
    }

    .game-card {
        padding: 0.4rem;
        border-width: 2px;
        border-radius: 11px;
    }

    .bingo-square {
        border-width: 1.5px;
    }

    .masthead::before,
    .masthead::after {
        display: none;
    }

    .controls {
        gap: 0.35rem;
    }
}

/* Small phones (SE-class 320px up through the 360px Android floor). Five
   columns leaves ~41-49px of usable width per square, so the long prompts
   need the tighter steps to stay readable rather than clipped. */
@media (max-width: 360px) {
    .square__label {
        font-size: 0.46rem;
    }

    .square__label[data-len="lg"] {
        font-size: 0.42rem;
    }

    .square__label[data-len="xl"] {
        font-size: 0.38rem;
    }

    .bingo-square.is-free .square__label {
        font-size: 0.62rem;
    }

    .square__mark {
        top: 1px;
        right: 1px;
        width: 14px;
        border-width: 1px;
    }

    /* The controls used to be three across at this width and needed shrinking
       to fit; at 2x2 each button has roughly double the room, so the base
       clamp is comfortable again. */
}

@media (prefers-reduced-motion: reduce) {
    .csb *,
    .csb *::before,
    .csb *::after,
    .instructions *,
    .confetti * {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .confetti {
        display: none;
    }
}

/* ---- Print: a blank card to carry around the show ------------------- */
@media print {
    @page {
        size: portrait;
        margin: 0.4in;
    }

    *,
    *::before,
    *::after {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    html,
    body {
        background: #fff;
    }

    .skip-link,
    .site-header,
    .site-footer,
    .csb-shell__band,
    .controls,
    .board-hint,
    .road-sign,
    .confetti,
    .instructions,
    .bingo-message {
        display: none !important;
    }

    .csb {
        padding: 0;
    }

    .csb .container,
    .csb .container--narrow {
        max-width: 100%;
        padding-inline: 0;
    }

    .csb-shell {
        width: 100%;
        max-width: 7.5in;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
    }

    .csb-shell__inner {
        padding: 0;
    }

    .masthead {
        margin-bottom: 0.25in;
    }

    .masthead h1 {
        font-size: 34pt;
        text-shadow: none;
    }

    .game-card {
        box-shadow: none;
        break-inside: avoid;
    }

    .bingo-square {
        box-shadow: none;
    }
}