/* Memory App — bespoke styles (clip-path hex nodes, glows, dice, rotate guard).
   Kept out of Tailwind on purpose: these are hand-tuned shapes/effects that don't
   map to utilities. Loaded only by _MemoryLayout. */

[x-cloak] {
    display: none !important;
}

html.memory-app-active,
body.memory-app-active {
    overflow: hidden;
    overscroll-behavior: none;
}

.memory-app-root {
    min-height: 100dvh;
    background:
        radial-gradient(120% 130% at 50% -10%, rgba(56, 189, 248, 0.22) 0%, rgba(56, 189, 248, 0) 55%),
        radial-gradient(130% 150% at 50% 120%, rgba(250, 204, 21, 0.18) 0%, rgba(250, 204, 21, 0) 60%),
        linear-gradient(180deg, #0a1020 0%, #030712 100%);
    color: #f8fafc;
}

.memory-app-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: calc(0.65rem + env(safe-area-inset-top));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    padding-left: max(0.75rem, env(safe-area-inset-left));
}

.memory-toolbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.memory-toolbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0 0.85rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.memory-toolbar-link:hover,
.memory-toolbar-link:focus-visible {
    border-color: rgba(148, 163, 184, 0.7);
    background: rgba(15, 23, 42, 0.92);
    transform: translateY(-1px);
    outline: none;
}

.memory-toolbar-center {
    min-width: 0;
    text-align: center;
}

.memory-toolbar-center h1 {
    margin: 0;
    font-size: clamp(1rem, 2.6vw, 1.4rem);
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.memory-toolbar-center p {
    margin: 0.2rem 0 0;
    color: #94a3b8;
    font-size: clamp(0.67rem, 1.55vw, 0.82rem);
}

.memory-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.memory-toolbar-button {
    min-height: 2.35rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    padding: 0 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.memory-toolbar-button:hover,
.memory-toolbar-button:focus-visible {
    border-color: rgba(148, 163, 184, 0.75);
    background: rgba(15, 23, 42, 0.92);
    transform: translateY(-1px);
    outline: none;
}

.memory-palette-panel {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(7px);
    padding: 0.6rem 0.7rem;
    display: grid;
    gap: 0.55rem;
}

.memory-palette-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.memory-color-label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.memory-color-input {
    width: 100%;
    height: 2.1rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    border-radius: 0.65rem;
    background-color: transparent;
    padding: 0.2rem;
    cursor: pointer;
}

.memory-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.memory-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 0.5rem;
}

.memory-color-input::-moz-color-swatch {
    border: none;
    border-radius: 0.5rem;
}

.memory-palette-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}

.memory-panel-button {
    min-height: 2rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(30, 41, 59, 0.85);
    color: #e2e8f0;
    padding: 0 0.8rem;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease;
}

.memory-panel-button:hover,
.memory-panel-button:focus-visible {
    border-color: rgba(148, 163, 184, 0.8);
    transform: translateY(-1px);
    outline: none;
}

.memory-board-wrap {
    flex: 1;
    min-height: 0;
    display: grid;
    place-items: center;
}

.memory-board {
    width: min(100%, 1020px);
    display: grid;
    gap: clamp(0.45rem, 1.2vw, 0.82rem);
    padding: clamp(0.5rem, 1.3vw, 0.85rem);
    border-radius: clamp(1.15rem, 2.1vw, 1.8rem);
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(3, 7, 18, 0.52);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15);
}

.memory-lane {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    gap: clamp(0.28rem, 1vw, 0.55rem);
}

.memory-lane-top {
    justify-content: flex-end;
    padding-right: clamp(1.2rem, 8vw, 5rem);
}

.memory-lane-bottom {
    justify-content: flex-start;
    padding-left: clamp(1.2rem, 8vw, 5rem);
}

.memory-lane::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 9999px;
    height: clamp(0.23rem, 0.58vw, 0.42rem);
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.08) 0%, rgba(248, 250, 252, 0.42) 50%, rgba(248, 250, 252, 0.08) 100%);
}

.memory-lane-top::before {
    left: 40%;
    right: 4%;
}

.memory-lane-bottom::before {
    left: 4%;
    right: 40%;
}

.memory-node,
.memory-zero {
    width: clamp(52px, 8vw, 82px);
    aspect-ratio: 1 / 1;
    position: relative;
    z-index: 1;
    isolation: isolate;
    border: 2px solid rgba(15, 23, 42, 0.5);
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 160ms ease, opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.45), inset 0 0 0 1px rgba(248, 250, 252, 0.24);
}

.memory-node::after,
.memory-zero::after {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 170ms ease, transform 170ms ease;
    background: radial-gradient(
        circle,
        rgb(var(--node-glow-rgb, 125 211 252) / 0.94) 0%,
        rgb(var(--node-glow-rgb, 125 211 252) / 0.68) 36%,
        rgb(var(--node-glow-rgb, 125 211 252) / 0) 76%);
}

.memory-node {
    clip-path: polygon(24% 6%, 76% 6%, 100% 50%, 76% 94%, 24% 94%, 0 50%);
    background: var(--node-fill);
    color: var(--node-text);
    opacity: 1;
}

.memory-zero {
    --node-glow-rgb: 180 225 255;
    border-radius: 999px;
    background: linear-gradient(160deg, rgba(248, 250, 252, 0.98) 0%, rgba(226, 232, 240, 0.97) 100%);
}

.memory-zero img {
    width: 66%;
    height: 66%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.2));
}

.memory-node:hover,
.memory-node:focus-visible,
.memory-zero:hover,
.memory-zero:focus-visible {
    border-color: rgba(248, 250, 252, 0.8);
    transform: translateY(-1px);
    outline: none;
}

/* Glanceability: the board stays colourful, but only the ACTIVE tile sits at
   full brightness. Every other tile is calmed down so the active marker is the
   one thing your eye lands on. Tiles stay clearly yellow/blue — this dims, it
   doesn't grey them out. Hovering a tile previews it back near full. */
.memory-node:not(.is-active),
.memory-zero:not(.is-active) {
    filter: brightness(0.58) saturate(0.92);
}

.memory-node:not(.is-active):hover,
.memory-node:not(.is-active):focus-visible,
.memory-zero:not(.is-active):hover,
.memory-zero:not(.is-active):focus-visible {
    filter: brightness(0.85) saturate(1);
}

/* The active tile: full brightness, bigger, lifted above its neighbours, with a
   gentle breathing pulse so it's unmistakable at a glance. */
.memory-node.is-active,
.memory-zero.is-active {
    opacity: 1;
    z-index: 5;
    border-color: rgba(255, 255, 255, 1);
    transform: translateY(-4px) scale(1.2);
    animation: memory-active-pulse 1.8s ease-in-out infinite;
}

@keyframes memory-active-pulse {
    0%, 100% { transform: translateY(-4px) scale(1.18); }
    50%      { transform: translateY(-6px) scale(1.24); }
}

@media (prefers-reduced-motion: reduce) {
    .memory-node.is-active,
    .memory-zero.is-active {
        animation: none;
    }
}

/* Hex tiles are clip-path'd, and clip-path also clips box-shadow — so the
   active ring has to be drawn with drop-shadow filters, which DO follow the
   clipped hexagon silhouette. Four offsets build a crisp white outline that
   hugs the shape; the last one is the coloured glow. */
.memory-node.is-active {
    filter:
        brightness(1.08) saturate(1.08)
        drop-shadow(3px 0 0 #ffffff)
        drop-shadow(-3px 0 0 #ffffff)
        drop-shadow(0 3px 0 #ffffff)
        drop-shadow(0 -3px 0 #ffffff)
        drop-shadow(0 0 18px rgb(var(--node-glow-rgb, 125 211 252) / 1));
}

/* The zero tile is a circle (no clip-path), so a real box-shadow ring works. */
.memory-zero.is-active {
    filter: brightness(1.08) saturate(1.08);
    box-shadow:
        0 20px 44px rgba(15, 23, 42, 0.8),
        0 0 0 4px rgb(255 255 255 / 0.96),
        0 0 0 10px rgb(var(--node-glow-rgb, 125 211 252) / 0.76),
        0 0 52px 14px rgb(var(--node-glow-rgb, 125 211 252) / 0.88);
}

.memory-node.is-active::after,
.memory-zero.is-active::after {
    opacity: 1;
    transform: scale(1.12);
}

.memory-node-value {
    font-size: clamp(1.6rem, 4.3vw, 3rem);
    font-weight: 780;
    line-height: 1;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
}

.memory-node.is-active .memory-node-value {
    text-shadow:
        0 1px 0 rgb(255 255 255 / 0.45),
        0 0 16px rgb(var(--node-glow-rgb, 125 211 252) / 0.66);
}

.memory-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.memory-status-pill {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.memory-status-positive {
    background: var(--memory-positive);
    color: var(--memory-positive-text);
}

.memory-status-negative {
    background: var(--memory-negative);
    color: var(--memory-negative-text);
}

.memory-status-neutral {
    background: rgba(148, 163, 184, 0.32);
    color: #f8fafc;
}

.memory-status-readout {
    border-radius: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.memory-dice-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(2, 6, 23, 0.8);
    display: grid;
    place-items: center;
    padding: 1rem;
}

.memory-dice-dialog {
    width: min(760px, 100%);
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.42);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 0.96) 100%);
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.5);
    padding: 0.95rem;
    display: grid;
    gap: 0.95rem;
}

.memory-dice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.memory-dice-header h2 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.memory-dice-close {
    min-height: 2rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: rgba(51, 65, 85, 0.95);
    color: #f8fafc;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.memory-dice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.memory-dice-card {
    border-radius: 1rem;
    border: 2px solid rgba(248, 250, 252, 0.3);
    background: var(--dice-fill);
    color: var(--dice-text);
    min-height: clamp(132px, 27vw, 190px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    box-shadow: inset 0 0 0 1px rgba(248, 250, 252, 0.22);
}

.memory-dice-label {
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.85;
}

.memory-dice-card strong {
    font-size: clamp(3rem, 11vw, 5.4rem);
    line-height: 1;
    text-shadow: 0 3px 12px rgba(15, 23, 42, 0.28);
}

.memory-dice-summary {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.memory-dice-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.memory-dice-action {
    min-height: 2.25rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.62);
    background: rgba(30, 41, 59, 0.95);
    color: #f8fafc;
    padding: 0 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease;
}

.memory-dice-action-primary {
    background: rgba(37, 99, 235, 0.92);
    border-color: rgba(147, 197, 253, 0.7);
}

.memory-dice-action:hover,
.memory-dice-action:focus-visible,
.memory-dice-close:hover,
.memory-dice-close:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(148, 163, 184, 0.9);
    outline: none;
}

.memory-rotate-guard {
    display: none;
}

@media (max-height: 530px) {
    .memory-node,
    .memory-zero {
        width: clamp(44px, 7vw, 62px);
    }

    .memory-toolbar-center p {
        display: none;
    }
}

/* Portrait on a touch device: hide the board and ask the user to rotate.
   Mobile browsers reject screen.orientation.lock() outside an installed PWA,
   so this guard is the fallback that enforces landscape. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .memory-app-shell {
        display: none;
    }

    .memory-dice-overlay {
        display: none;
    }

    .memory-rotate-guard {
        min-height: 100dvh;
        padding: calc(1rem + env(safe-area-inset-top)) 1rem calc(1.2rem + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.7rem;
    }

    .memory-rotate-guard img {
        width: 70px;
        height: 70px;
        object-fit: contain;
        border-radius: 1rem;
        border: 1px solid rgba(148, 163, 184, 0.45);
        background: rgba(15, 23, 42, 0.7);
        padding: 0.35rem;
    }

    .memory-rotate-guard h2 {
        margin: 0;
        font-size: 1.25rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .memory-rotate-guard p {
        margin: 0;
        color: #cbd5e1;
        max-width: 18rem;
    }

    .memory-rotate-link {
        margin-top: 0.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.35rem;
        padding: 0 1rem;
        border-radius: 0.85rem;
        border: 1px solid rgba(148, 163, 184, 0.55);
        background: rgba(15, 23, 42, 0.82);
        color: #f8fafc;
        text-decoration: none;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
}