/* The canvas handles gestures; never hand a downward drag to browser refresh. */
html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
#canvas { touch-action: none; }

@font-face {
    font-family: 'Satoshi';
    src: url('./fonts/Satoshi-Regular.ttf');
}

* {
    font-family: Satoshi;
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    /* make non-draggable */
    user-drag: none;
    -webkit-user-drag: none;
    -ms-user-select: none;
}

#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 38px;
    /* border-bottom: 1px solid rgba(100, 100, 100, 0.05); */
    z-index: 1;
    pointer-events: none;
}

#header-center {
    text-align: center;
    display: inline-block;
    left: 50%;
    right: 50%;
    position: fixed;
    top: 0;
    width: 300px;
    margin-left: -150px;
}

#canvas-container {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
}

#connect {
    position: absolute;
    right: 10px;
}

#color-picker {
    position: fixed;
    top: 40px;
    max-width: 460px;
    left: 10px;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
}

.color-table {
    width: 100%;
    border-collapse: collapse;
}

.color-elem-td {
    border-collapse: collapse;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.1);
    border-collapse: collapse;
}

.color-elem-tr {
    border-collapse: collapse;
}

.color-elem-td:hover {
    outline: 1px solid black;
}

.icon {
    width: 24px;
    height: 24px;
    padding: 1px;
}

.button {
    height: 26px;
    white-space: nowrap;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.9);
    vertical-align: center;
    border-radius: 0 0 6px 6px;
    border: 1px solid rgba(220, 220, 220, 0.7);
    backdrop-filter: blur(8px);
}

.icon-button, .connect-button, .round-control, #wallet-controls button {
    height: 26px;
    white-space: nowrap;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.9);
    vertical-align: center;
    border-radius: 0 0 6px 6px;
    border: 1px solid rgba(220, 220, 220, 0.7);
    backdrop-filter: blur(4px);
    padding: 4px 15px;
    box-shadow: rgba(0, 0, 0, 0.16) 10px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
    pointer-events: all;
}

.icon-button-inset, .wallet-button[aria-expanded="true"], .mining-button[aria-pressed="true"] {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.icon-button:active, .round-control:active, #wallet-controls button:active {
    box-shadow: rgba(50, 50, 93, 0.35) 0px 50px 100px -20px, rgba(0, 0, 0, 0.5) 0px 30px 60px -30px, rgba(10, 37, 64, 0.5) 0px -2px 6px 0px inset;
}

.button-disabled:active {
    box-shadow: none !important;
}

.button-text {
    vertical-align: super;
}

.button-leftmost {
    border-radius: 0 0 0 6px;
    margin-right: 0;
    border-right: none;
}

.button-center {
    border-radius: 0;
    margin-right: 0;
    margin-left: 0;
    border-right: none;
}

.button-rightmost {
    border-radius: 0 0 6px 0;
    margin-left: 0;
}

.button-disabled {
    filter: opacity(60%);
    backdrop-filter: blur(10px);
    cursor: wait !important;
}

#color-selected-container {
    box-sizing: content-box;
    pointer-events: auto;
    vertical-align: top;
    padding: 4px 0px;
    margin: 0 0 0 20px;
}

#color-selected {
    width: 24px;
    border-radius: 3px;
    height: 24px;
    display: inline-block;
    border: 1px solid rgb(220, 220, 220);
    margin-left: 4px;
    margin-right: 4px;
}

.dragging {
    cursor: move !important;
}

.drawing {
    cursor: crosshair;
}

.picking {
    cursor: pointer;
}

#coords {
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 15px;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0 3px 0 0;
}

/* submit button spinner */
#submit, #discard {
    visibility: hidden;
}

.spinning {
    content: url('/static/icons/spinner-solid.svg');
    animation: rotate 3s infinite;
    animation-timing-function: linear;
}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg) }
    to { -webkit-transform: rotate(360deg) }
}

#social-container {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        align-content: stretch;
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 10;
}


#confetti-canvas {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
}

/* cell-highlight */

#cell-highlight {
    pointer-events: none;
    border: 1px solid black;
    backdrop-filter: invert(70%);
    position: fixed;
    width: 0px;
    height: 0px;
    animation-duration: 1s;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-timing-function: steps(2, end);
}

@keyframes blink {
  from {
      backdrop-filter: invert(0%);
  }

  to {
      backdrop-filter: invert(100%);
  }
}

/* mobiles */

@media only screen and (hover: none) and (pointer: coarse) {
    .button-text {
        display: none;
    }

    .icon {
        width: 36px;
        height: 36px;
        padding: 1px;
    }

    .icon-button {
        height: 36px;
        width: 36px;
    }

    .connect-button {
        display: none;
    }

    #header-center {
        text-align: center;
        display: inline-block;
        position: fixed;
        bottom: 0;
        top: unset;
        right: 50%;
        left: 50%;
        width: 300px;
        height: 44px;
        margin-left: -150px;
    }

    #color-picker {
        top: 70px;
        max-width: 460px;
        left: 0;
    }

    #color-selected {
        width: 36px;
        height: 36px;
        border-radius: 3px;
        display: inline-block;
        border: 1px solid rgb(220, 220, 220);
        margin-left: 4px;
        margin-right: 4px;
    }

    #color-selected-container {
        margin: 0;
        height: 37px;
    }

    #social-container {
        display: none;
    }

    .button-leftmost-center {
        border-radius: 6px 0 0 0;
        margin-right: 0;
        border-right: none;
    }

    .button-rightmost-center {
        border-radius: 0 6px 0 0;
        margin-right: 0;
        border-right: none;
    }

}

/* pow.place account and startup state */
#loading {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #eee; color: #333; font-family: sans-serif;
}
#enter-game { position: relative; display: grid; place-items: center; width: 144px; height: 48px; margin-top: 24px; padding: 0; box-sizing: border-box; border: 1px solid #333; border-radius: 8px; background: #fff; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
#enter-game:disabled { cursor: wait; }
#enter-game:focus-visible { outline: 3px solid #ff8c00; outline-offset: 3px; }
#enter-game[aria-busy="true"] .entry-label { visibility: hidden; }
.entry-spinner { position: absolute; width: 20px; height: 20px; border: 3px solid #ddd; border-top-color: #333; border-radius: 50%; animation: entry-spin .8s linear infinite; }
#enter-game:not([aria-busy="true"]) .entry-spinner { display: none; }
@keyframes entry-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .entry-spinner { animation-duration: 2s; } }
#loading .app-logo { margin-bottom: 20px; }
.loading-heading { font-size: 2em; font-weight: 700; margin: 0 24px 12px; }
#loading #retry { position: absolute; bottom: 24px; }
#loading-message { margin: 0 24px; max-width: 560px; text-align: center; line-height: 1.5; }
#connect { cursor: default; }
#submit, #discard { visibility: hidden; }
.tippy-content { white-space: pre-line; }
.tippy-content a { color: #fff; }

#mining-controls { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 18px; z-index: 2; display: flex; align-items: flex-end; gap: 12px; }
#mining-controls[hidden], .control-popover[hidden] { display: none; }
.round-control { display: grid; place-items: center; padding: 0; border-radius: 50%; color: #000; }
.round-control:focus-visible, .wallet-button:focus-visible { outline: 3px solid #67acf2; outline-offset: 3px; }
.round-control[aria-disabled="true"] { opacity: .5; cursor: wait; }
.mining-button { position: relative; width: 76px; height: 76px; }
.mining-button[aria-pressed="false"]:not([aria-disabled="true"]) { animation: mining-idle-pulse 2s ease-in-out infinite; }
.mining-button[aria-pressed="false"][data-no-points="true"]:not([aria-disabled="true"]) { animation: mining-idle-jump 2s ease-in-out infinite; }
.mining-button img { width: 44px; height: 44px; }
.mining-button[aria-pressed="true"]::after {
    content: ''; position: absolute; inset: -3px; padding: 3px;
    border-radius: 50%; pointer-events: none;
    background: conic-gradient(transparent 0deg 260deg, #ffffff20 285deg, white 325deg, transparent 355deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: mining-orbit 1.2s linear infinite;
}
.wallet-button { box-sizing: content-box; display: inline-flex; align-items: center; justify-content: center; gap: 0; width: auto; color: #000; }
.wallet-button img { width: 24px; height: 24px; padding: 1px; flex-shrink: 0; pointer-events: none; }
.control-popover { position: absolute; bottom: 94px; left: 0; width: 220px; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.9); color: #000; border: 1px solid rgba(220,220,220,.7); backdrop-filter: blur(4px); box-shadow: 0 3px 14px #0002; }
#worker-controls { left: 88px; bottom: 0; width: min(340px, calc(100vw - 124px)); box-sizing: border-box; }
.mining-button .mining-pause { display: none; }
.mining-button[aria-pressed="true"] .mining-pickaxe { display: none; }
.mining-button[aria-pressed="true"] .mining-pause { display: block; }
#worker-controls label { display: flex; justify-content: space-between; font-size: 14px; }
.worker-controls-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
#worker-controls label { grid-column: 1 / -1; }
#worker-count { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; margin: 0; accent-color: #555; }
#mining-rate { grid-column: 2; grid-row: 2; min-width: 12ch; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
#wallet-controls { display: flex; flex-direction: column; gap: 10px; top: 100%; right: 0; bottom: auto; left: auto; pointer-events: auto; }
#wallet-controls[hidden] { display: none; }
body:has(#wallet-toggle[aria-expanded="true"]) #awn-toast-container.awn-top-right { top: auto; bottom: 24px; }
body:has(#draw.tour-step-backdrop) #awn-toast-container.awn-top-right { top: auto; bottom: 24px; }
.mining-button.tour-step-backdrop { animation: none !important; }
#wallet-controls button { display: flex; align-items: center; gap: 8px; height: auto; border-radius: 6px; padding: 9px; color: inherit; text-align: left; }
#wallet-controls button img { width: 20px; height: 20px; flex-shrink: 0; pointer-events: none; }
#wallet-controls { width: min(300px, calc(100vw - 20px)); box-sizing: border-box; }
#wallet-summary, #withdraw-form { display: flex; flex-direction: column; gap: 10px; }
#wallet-summary[hidden], #withdraw-form[hidden] { display: none; }
.wallet-address-label, #withdraw-fee { font-size: 13px; }
.wallet-address-row { display: flex; align-items: center; gap: 8px; }
#wallet-controls #wallet-address, #wallet-controls #copy-address { border: 0; background: transparent; box-shadow: none; padding: 0; }
#wallet-controls #wallet-address { display: block; flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: 13px; user-select: text; -webkit-user-select: text; }
#wallet-controls #copy-address { flex-shrink: 0; padding: 4px; }
#wallet-controls #copy-address img { width: 16px; height: 16px; }
#wallet-controls #wallet-address:focus-visible, #wallet-controls #copy-address:focus-visible { outline: 2px solid #67acf2; outline-offset: 2px; }
#withdraw-form input { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border: 1px solid #bbb; border-radius: 6px; font-size: 16px; user-select: text; -webkit-user-select: text; }
.withdraw-actions { display: flex; gap: 10px; }
.withdraw-actions button { flex: 1; }
#wallet-controls button:disabled { opacity: .5; cursor: wait; }
#brc-balance { font-size: 15px; font-weight: 700; }
@keyframes mining-orbit { to { transform: rotate(360deg); } }
@keyframes mining-idle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes mining-idle-jump {
    0%, 40%, 65%, 100% { transform: translateY(0); }
    22% { transform: translateY(-24px); }
    52% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .mining-button[aria-pressed="false"][data-no-points="true"]:not([aria-disabled="true"]), .mining-button[aria-pressed="false"]:not([aria-disabled="true"]), .mining-button[aria-pressed="true"]::after { animation: none; }
}

.tippy-content { overflow-wrap: anywhere; }
#header-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; padding-right: 10px; }
#paint-controls { display: flex; flex: 0 0 auto; }
#connect { position: relative; display: flex; flex: 0 0 auto; margin: 0 0 0 auto; pointer-events: auto; align-items: center; gap: 0; top: auto; right: auto; height: auto; max-width: calc(100vw - 40px); }
@media only screen and (hover: none) and (pointer: coarse) {
    #connect { padding: 0; }
    .wallet-button img { width: 36px; height: 36px; }
}

.round-control img { pointer-events: none; }