/* /Components/AllHands/Puzzle.razor.rz.scp.css */
.poker-grid[b-h2psrelst9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 auto;
    max-width: 400px;
}

.poker-row[b-h2psrelst9] {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.poker-cell[b-h2psrelst9] {
    width: 60px;
    height: 80px;
    border: 2px solid #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #f5f5f5;
    transition: all 0.2s ease;
}

.poker-cell.empty[b-h2psrelst9] {
    background-color: #e8e8e8;
    border-style: dashed;
}

.poker-cell.empty:hover[b-h2psrelst9] {
    background-color: #d0d0d0;
    border-color: #999;
}

.poker-cell.filled[b-h2psrelst9] {
    background-color: white;
    border-color: #333;
}

.card-display[b-h2psrelst9] {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
}

.card-display.red[b-h2psrelst9] {
    color: #d32f2f;
}

.card-display.black[b-h2psrelst9] {
    color: #212121;
}

.hand-requirements[b-h2psrelst9] {
    max-width: 400px;
    margin: 0 auto;
}

.hand-requirement[b-h2psrelst9] {
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
    background-color: #f0f0f0;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.hand-requirement.complete[b-h2psrelst9] {
    background-color: #c8e6c9;
    color: #2e7d32;
    font-weight: bold;
}

.player-cards[b-h2psrelst9] {
    max-width: 400px;
    margin: 0 auto;
}

.cards-container[b-h2psrelst9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.player-card[b-h2psrelst9] {
    width: 50px;
    height: 70px;
    border: 2px solid #ccc;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: white;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease;
    user-select: none;
}

.player-card:hover[b-h2psrelst9] {
    border-color: #666;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.player-card.selected[b-h2psrelst9] {
    border-color: #2196f3;
    background-color: #e3f2fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(33,150,243,0.3);
}

.player-card.red[b-h2psrelst9] {
    color: #d32f2f;
}

.player-card.black[b-h2psrelst9] {
    color: #212121;
}

.flex-center[b-h2psrelst9] {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive design */
@media (max-width: 480px) {
    .poker-cell[b-h2psrelst9] {
        width: 50px;
        height: 70px;
    }
    
    .card-display[b-h2psrelst9] {
        font-size: 14px;
    }
    
    .player-card[b-h2psrelst9] {
        width: 45px;
        height: 60px;
        font-size: 12px;
    }
    
    .hand-requirement[b-h2psrelst9] {
        font-size: 12px;
    }
} 
/* /Components/BellsGame.razor.rz.scp.css */
.has-text-purple[b-7ms66wfgkb] {
    color: #9333ea !important;
}

.has-background-purple-light[b-7ms66wfgkb] {
    background-color: #f3e8ff !important;
}

.has-background-danger-light[b-7ms66wfgkb] {
    background-color: #fee2e2 !important;
}

.is-primary-light[b-7ms66wfgkb] {
    background-color: #ebf5ff !important;
}

.square-icon[b-7ms66wfgkb] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.puzzle-grid[b-7ms66wfgkb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0rem 0.5rem 0.5rem 0.5rem;
    gap: 2px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.puzzle-grid.large-grid[b-7ms66wfgkb] {
    gap: 1px;
}

.puzzle-grid.large-grid .grid-row[b-7ms66wfgkb] {
    gap: 1px;
}

@media screen and (min-width: 769px) {
    .puzzle-grid[b-7ms66wfgkb] {
        max-width: 80%;
        margin: 0 auto;
    }
}

.grid-header[b-7ms66wfgkb] {
    display: flex;
    width: 100%;
    align-items: flex-end;
}

.grid-row[b-7ms66wfgkb] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 2px;
}

.grid-cell[b-7ms66wfgkb] {
    flex: 1;
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.grid-label[b-7ms66wfgkb] {
    flex: 0 0 auto;
    width: calc(100% / 8) !important;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: clamp(0.5rem, 1.5vw, 1rem);
    position: relative;
    white-space: nowrap;
    padding-right: 0.5rem;
    margin-right: 2px;
}

.large-grid .grid-label[b-7ms66wfgkb] {
    font-size: clamp(0.7rem, 2vw, 0.75rem);
}

.large-grid .grid-header .grid-cell[b-7ms66wfgkb] {
    font-size: clamp(0.7rem, 2vw, 0.75rem) !important;
}

.grid-header .grid-label[b-7ms66wfgkb] {
    height: 0;
    padding-bottom: calc(100% / 8);
    position: relative;
    padding-right: 0;
    margin-right: 0;
}

.grid-cell .icon[b-7ms66wfgkb] {
    width: 72%;
    height: 72%;
    object-fit: contain;
    filter: none;
}

.grid-cell img[src*="whistle.svg"][b-7ms66wfgkb] {
    width: 86.4%;
    height: 86.4%;
}

/* Bell ringing animation */
.ringing-bell[b-7ms66wfgkb] {
    animation: ringBell-b-7ms66wfgkb 6s ease-in-out infinite;
    transform-origin: top center;
}

/* Whistle blowing animation */
.blowing-whistle[b-7ms66wfgkb] {
    animation: blowWhistle-b-7ms66wfgkb 6s ease-in-out infinite;
    animation-delay: 2s;
    transform-origin: center;
}

@keyframes ringBell-b-7ms66wfgkb {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(15deg); }
    10% { transform: rotate(-15deg); }
    15% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
    25% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

@keyframes blowWhistle-b-7ms66wfgkb {
    0% { transform: scale(1) rotate(0deg); }
    2% { transform: scale(1.1) rotate(-5deg); }
    4% { transform: scale(1.15) rotate(5deg); }
    6% { transform: scale(1.1) rotate(-3deg); }
    8% { transform: scale(1.15) rotate(5deg); }
    10% { transform: scale(1.1) rotate(-3deg); }
    12% { transform: scale(1.15) rotate(5deg); }
    14% { transform: scale(1.1) rotate(-3deg); }
    16% { transform: scale(1.15) rotate(5deg); }
    18% { transform: scale(1.1) rotate(-3deg); }
    20% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* SVG color overrides */
.has-text-success .icon[b-7ms66wfgkb] {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(118deg) brightness(118%) contrast(119%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(118deg) brightness(118%) contrast(119%) !important;
}

.has-text-danger .icon[b-7ms66wfgkb] {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

.has-text-purple .icon[b-7ms66wfgkb] {
    filter: brightness(0) saturate(100%) invert(24%) sepia(98%) saturate(2878%) hue-rotate(262deg) brightness(104%) contrast(101%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(24%) sepia(98%) saturate(2878%) hue-rotate(262deg) brightness(104%) contrast(101%) !important;
}

/* Header icon specific colors */
.grid-header .has-text-danger .icon[b-7ms66wfgkb] {
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) !important;
}

.grid-header .has-text-purple .icon[b-7ms66wfgkb] {
    filter: brightness(0) saturate(100%) invert(24%) sepia(98%) saturate(2878%) hue-rotate(262deg) brightness(104%) contrast(101%) !important;
    -webkit-filter: brightness(0) saturate(100%) invert(24%) sepia(98%) saturate(2878%) hue-rotate(262deg) brightness(104%) contrast(101%) !important;
}

/* Force WebKit to clear filters on empty cells - iOS bug workaround */
.grid-cell:not(.has-text-danger):not(.has-text-purple):not(.has-text-success) .icon[b-7ms66wfgkb] {
    filter: none !important;
    -webkit-filter: none !important;
}

@media screen and (max-width: 768px) {
    .grid-label[b-7ms66wfgkb] {
        width: calc(100% / 7) !important;
        font-size: clamp(0.35rem, 1vw, 0.7rem);
        padding: 0 0.1rem;
    }
}

@media screen and (max-width: 480px) {
    .grid-label[b-7ms66wfgkb] {
        font-size: clamp(0.3rem, 0.8vw, 0.6rem);
    }
}

.diagonal-split[b-7ms66wfgkb] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 3px solid #ef4444; /* Default bell color (danger) */
    border-radius: 5px;
    background: linear-gradient(52deg, #fee2e2 49.5%, #f3e8ff 49.5%);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.diagonal-split.whistle-selected[b-7ms66wfgkb] {
    border-color: #9333ea; /* Whistle color (purple) */
}

.bottom-left[b-7ms66wfgkb], .top-right[b-7ms66wfgkb] {
    position: absolute;
    width: 50%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
}

.bottom-left[b-7ms66wfgkb] {
    left: 0;
    bottom: 0;
}

.top-right[b-7ms66wfgkb] {
    top: 0;
    right: 0;
}

.diagonal-split[b-7ms66wfgkb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: linear-gradient(52deg, transparent 49.5%, #dbdbdb 49.5%, #dbdbdb 50.5%, transparent 50.5%);
    transform: translate(-25%, -25%);
    z-index: 1;
}

.yellow[b-7ms66wfgkb] {
    background-color: #ffffe0 !important;
}

.black[b-7ms66wfgkb] {
    color: black !important;
}

.flex-center[b-7ms66wfgkb] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Halfway guide lines (large 12x12 grid only) to help counting cells.
   The lines are real flex items in the layout - a 5px spacer column
   between columns 6 and 7, and a 5px spacer row between rows 6 and 7 -
   so the line is centred in the channel by the layout engine rather than
   by offsets. The horizontal spacer starts an empty .grid-label so the
   line begins exactly at the first cell and never crosses the clues. */
.mid-divider-v[b-7ms66wfgkb] {
    flex: 0 0 5px;
    align-self: stretch;
    position: relative;
    pointer-events: none;
}

.grid-row > .mid-divider-v[b-7ms66wfgkb]::before {
    content: '';
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: 2px;
    width: 1px;
    background: #8a8a8a;
}

/* Stop the vertical line flush with the top and bottom of the grid */
.puzzle-grid > .grid-row:nth-child(2) > .mid-divider-v[b-7ms66wfgkb]::before {
    top: 0;
}

.puzzle-grid > .grid-row:nth-child(14) > .mid-divider-v[b-7ms66wfgkb]::before {
    bottom: 0;
}

.mid-divider-h[b-7ms66wfgkb] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 5px;
    pointer-events: none;
}

.mid-divider-h .mid-line[b-7ms66wfgkb] {
    flex: 1;
    height: 1px;
    margin-top: 2px;
    background: #8a8a8a;
}
/* /Components/BuzzledForever/BuzzledForeverGame.razor.rz.scp.css */
.bf-scene[b-zw6ztg86tu] {
    /* the rail-ads layout sizes the centre column from its content, so hold
       the scene open with a viewport unit (same trick as the overworld) */
    width: 100vw;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 20px;
}

/* Toolbar styled like Buzzled's stats toolbar. */
.bf-toolbar[b-zw6ztg86tu] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #f5f5f5;
    border-radius: 24px;
    padding: 5px 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bf-pill[b-zw6ztg86tu] {
    background: #ffffff;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 14px;
    color: #333;
}

/* Level pill: tinted like the channel at that level. */
.bf-level.bf-lv1[b-zw6ztg86tu] { background: #f6efdc; }
.bf-level.bf-lv2[b-zw6ztg86tu] { background: #f1e5c6; }
.bf-level.bf-lv3[b-zw6ztg86tu] { background: #ecdab0; }
.bf-level.bf-lv4[b-zw6ztg86tu] { background: #e5cc96; }
.bf-level.bf-lv5[b-zw6ztg86tu] { background: #ddbd7d; }

.bf-actions[b-zw6ztg86tu] {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
}

.bf-actions button[b-zw6ztg86tu] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    color: #333;
    font-weight: 500;
}

.bf-actions button:disabled[b-zw6ztg86tu] {
    color: #aaa;
    cursor: default;
}

.bf-actions .bf-help[b-zw6ztg86tu] {
    color: #3273dc;
    font-weight: 600;
}

.bf-sep[b-zw6ztg86tu] {
    width: 2px;
    background: #e0e0e0;
}

.bf-hint[b-zw6ztg86tu] {
    margin: 0;
    font-size: 0.85rem;
    color: #888;
}

.bf-coords[b-zw6ztg86tu] {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
    font-variant-numeric: tabular-nums;
}

.bf-coords strong[b-zw6ztg86tu] {
    color: #333;
}

.bf-axis + .bf-axis[b-zw6ztg86tu] {
    margin-left: 0.9em;
}

.bf-arrow[b-zw6ztg86tu] {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.2em;
    margin-right: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bf-status[b-zw6ztg86tu] {
    color: #2e7d32;
    font-weight: 500;
}

.bf-status.warning[b-zw6ztg86tu] {
    color: #c62828;
}

/* Takes the pan/zoom input and clips the moving layer. */
.bf-board-frame[b-zw6ztg86tu] {
    position: relative;
    width: 100%;
    height: min(74vh, 660px);
    container-type: size;
    border-radius: 12px;
    overflow: hidden;
    background: #f7f2e2;
    border: 1px solid #e3d6ae;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.bf-board-frame:active[b-zw6ztg86tu] {
    cursor: grabbing;
}

/* Drawn past the frame on every side (PadFraction in the code-behind) and
   moved with a CSS transform during gestures; owPanZoom redraws the viewBox
   when the margin runs out. */
.bf-pan[b-zw6ztg86tu] {
    position: absolute;
    inset: -25cqmax;
    will-change: transform;
}

.bf-svg[b-zw6ztg86tu] {
    display: block;
    width: 100%;
    height: 100%;
}

/* No hit-testing mid-gesture: hover handlers would fire on every hex passed.
   Set on the svg alone and inherited, which the browser propagates without
   restyling every hex (a rule matching each descendant cost ~130ms per
   toggle on a slow phone). */
.bf-svg.pz-dragging[b-zw6ztg86tu] {
    pointer-events: none;
}

/* Static layers are cached markup strings, so they need ::deep. */
.bf-svg[b-zw6ztg86tu]  .bf-chan {
    /* stroked in its own colour so the channel reads as one solid band
       between boards rather than separate cells */
    fill: #e9dcb4;
    stroke: #e9dcb4;
    stroke-width: 5;
    stroke-linejoin: round;
}

.bf-svg[b-zw6ztg86tu]  .bf-chan.bf-blank {
    fill: #dfcd98;
    stroke: #e9dcb4;
}

/* The channel deepens one step per difficulty level (ForeverWorld.Level). */
.bf-svg[b-zw6ztg86tu]  .bf-lv1 .bf-chan { fill: #e4d1a0; stroke: #e4d1a0; }
.bf-svg[b-zw6ztg86tu]  .bf-lv1 .bf-chan.bf-blank { fill: #d9c287; }
.bf-svg[b-zw6ztg86tu]  .bf-lv2 .bf-chan { fill: #dfc58b; stroke: #dfc58b; }
.bf-svg[b-zw6ztg86tu]  .bf-lv2 .bf-chan.bf-blank { fill: #d3b672; }
.bf-svg[b-zw6ztg86tu]  .bf-lv3 .bf-chan { fill: #d9b875; stroke: #d9b875; }
.bf-svg[b-zw6ztg86tu]  .bf-lv3 .bf-chan.bf-blank { fill: #cca95e; }
.bf-svg[b-zw6ztg86tu]  .bf-lv4 .bf-chan { fill: #d2aa60; stroke: #d2aa60; }
.bf-svg[b-zw6ztg86tu]  .bf-lv4 .bf-chan.bf-blank { fill: #c49b4b; }
.bf-svg[b-zw6ztg86tu]  .bf-lv5 .bf-chan { fill: #c99a4b; stroke: #c99a4b; }
.bf-svg[b-zw6ztg86tu]  .bf-lv5 .bf-chan.bf-blank { fill: #ba8b39; }

.bf-svg[b-zw6ztg86tu]  .bf-placeholder {
    fill: #f4f4f4;
    stroke: #e4e4e4;
    stroke-width: 1;
}

.bf-svg[b-zw6ztg86tu]  .bf-disc {
    fill: #ffffff;
    stroke: #aaa;
    stroke-width: 1.2;
    pointer-events: none;
}

.bf-svg[b-zw6ztg86tu]  .bf-disc-text {
    fill: #333;
    text-anchor: middle;
    dominant-baseline: central;
    font-weight: bold;
    pointer-events: none;
    user-select: none;
}

/* The bee in each blank corner: faded until its three boards are solved. */
.bf-bee[b-zw6ztg86tu] {
    fill: #c4b07a;
    pointer-events: none;
    transition: fill 0.5s ease;
}

.bf-bee.lit[b-zw6ztg86tu] {
    fill: #333333;
}

.bf-howto[b-zw6ztg86tu] {
    align-self: stretch;
    padding: 40px 12px 10px;
}
/* /Components/BuzzledForever/ForeverBoardView.razor.rz.scp.css */
/* Cell and pin styling mirrors Buzzled (BuzzledComponent.razor). */
.bf-hex[b-0zgquqdbl5] {
    stroke: #aaa;
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.2s ease, filter 0.2s ease;
}

.bf-hex:hover[b-0zgquqdbl5],
.bf-hex.highlighted[b-0zgquqdbl5] {
    filter: brightness(0.9);
}

.bf-hex.white[b-0zgquqdbl5] {
    fill: #ffffff;
}

.bf-hex.yellow[b-0zgquqdbl5] {
    fill: #ffd700;
}

.bf-hex.black[b-0zgquqdbl5] {
    fill: #333333;
}

.bf-hex-text[b-0zgquqdbl5] {
    fill: #333333;
    text-anchor: middle;
    dominant-baseline: central;
    font-weight: bold;
    pointer-events: none;
    user-select: none;
}

.bf-hex-text.on-black[b-0zgquqdbl5] {
    fill: #ffffff;
}

/* The row the solver hit a dead end in. */
.bf-hex.conflict[b-0zgquqdbl5] {
    stroke: #e53935;
    stroke-width: 2.5;
}

/* The board Solve will act on. */
.bf-focus-outline[b-0zgquqdbl5] {
    fill: none;
    stroke: #3273dc;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.7;
    pointer-events: none;
}

.bf-tip[b-0zgquqdbl5] {
    stroke: #aaa;
    stroke-width: 1.2;
    stroke-linejoin: round;
    cursor: pointer;
}

.bf-tip.yellow[b-0zgquqdbl5] {
    fill: #ffd700;
}

.bf-tip.black[b-0zgquqdbl5] {
    fill: #333333;
}

.bf-tip.match[b-0zgquqdbl5] {
    stroke: #00c853;
    stroke-width: 2.5;
}

/* A hidden tip (no clue for this board's row): hollow, not grey, so it can't
   read as a third clue colour. Inert to hover and click. */
.bf-tip.bf-tip-hidden[b-0zgquqdbl5] {
    fill: none;
    stroke: #9a9a9a;
    stroke-dasharray: 2.5 2;
    pointer-events: none;
}

.bf-solved .bf-hex[b-0zgquqdbl5] {
    stroke: #d9a400;
    stroke-width: 1.6;
    cursor: default;
    animation: bf-solved-pulse-b-0zgquqdbl5 0.6s ease-in-out;
}

.bf-solved .bf-tip[b-0zgquqdbl5] {
    cursor: default;
}

@keyframes bf-solved-pulse-b-0zgquqdbl5 {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
    100% { filter: brightness(1); }
}
/* /Components/Collections/CreatePuzzle.razor.rz.scp.css */
.create-body[b-zupfser1as] {
    max-width: 600px;
}

ul[b-zupfser1as] {
    list-style-type: none;
}

li[b-zupfser1as] {
    padding-bottom: 2px;
}

.puzz-link[b-zupfser1as] {
    text-decoration: underline !important;
}
/* /Components/Collections/Key.razor.rz.scp.css */
button[b-w1din71qoj] {
    position: relative;
    max-width: 40px;
    font-weight: bold;
    margin: 0px 2px 10px 2px;
    text-transform: uppercase;
    border-radius: 4px;
    border: none;
    height: 55px;
    background: white;
    display: grid;
    place-items: center;
    flex: 1;
    padding: 0px;
    padding-bottom: 20px;
    cursor: pointer;
    touch-action: manipulation;
}

.clicked[b-w1din71qoj] {
    background-color: #738276 !important;
    color: white;
}

.notClicked[b-w1din71qoj] {
    background-color: lightgray;
}

.letters[b-w1din71qoj] {
    background-color: #d3d6da;
}

.answering[b-w1din71qoj] {
    background-color: grey !important;
    color: white;
    padding-bottom: 0px;
}

.cost[b-w1din71qoj] {
    position: absolute;
    bottom: 0;
    color: white;
    background-color: var(--dark);
    width: 100%;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: solid 1px var(--dark);
}

.answering .cost[b-w1din71qoj] {
    display: none;
}
/* /Components/Collections/LetterSquare.razor.rz.scp.css */
div[b-msh9q6jlpg] {
    max-width: 45px;
    font-weight: bold;
    margin: 0px 2px 12px 2px;
    text-transform: uppercase;
    border-radius: 4px;
    border: solid 1px lightgrey;
    height: 50px;
    background: white;
    display: grid;
    place-items: center;
    flex: 1;
}

.space-square[b-msh9q6jlpg] {
    max-width: 45px;
    margin: 0px 2px 12px 2px;
    height: 50px;
    background: transparent;
    border: none;
    display: grid;
    place-items: center;
    flex: 1;
    box-shadow: none !important;
    background-color: white !important;
}
/* /Components/Collections/Puzzle.razor.rz.scp.css */
.puzzle-main[b-3qa2zw24bp] {
    padding-left: 5px;
    padding-right: 5px;
    max-width: 600px;
}

.button[b-3qa2zw24bp] {
    position: relative;
}

.score[b-3qa2zw24bp] {
    height: 50px;
    margin-right: 10px;
    background-color: #353839;
    color: white;
    font-weight: bold;
    font-size: 20px;
    width: 70px;
    border-radius: 4px;
    border: none;
    place-items: center !important;
}

.key-answering[b-3qa2zw24bp] {
    position: relative;
    font-weight: bold;
    background-color: grey;
    margin: 0px 3px 15px 3px;
    text-transform: uppercase;
    border-radius: 4px;
    color: white;
    border: none;
    height: 55px;
    display: grid;
    place-items: center;
    flex: 1;
    padding: 0px;
    cursor: pointer;
}


.t-letters[b-3qa2zw24bp] {
    background-color: grey;
    color: white;
    font-weight: bold;
    max-width: 120px;
    height: 40px;
}

.t-answer[b-3qa2zw24bp] {
    background-color: lightgray;
    color: black;
    font-weight: bold;
    max-width: 120px;
    height: 40px;
}

.words[b-3qa2zw24bp] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2px;
}

.word-row[b-3qa2zw24bp] {
    width: 100%;
    display: flex;
    margin: 0 auto 0px;
    gap: 2px;
}

.keyboard[b-3qa2zw24bp] {
    /*flex: 1 1 auto;*/
}

.row-3[b-3qa2zw24bp] {
    padding: 0 35%;
}

.row-4[b-3qa2zw24bp] {
    padding: 0 30%;
}

.row-5[b-3qa2zw24bp] {
    padding: 0 25%;
}

.row-6[b-3qa2zw24bp] {
    padding: 0 20%;
}

.row-7[b-3qa2zw24bp] {
    padding: 0 15%;
}

.row-8[b-3qa2zw24bp] {
    padding: 0 10%;
}

.row-9[b-3qa2zw24bp] {
    padding: 0 5%;
}

.row-10[b-3qa2zw24bp] {
    padding: 0 0%;
}

.keyrow-2[b-3qa2zw24bp] {
    padding: 0 5%;
}

.keyrow-3.letters[b-3qa2zw24bp] {
    padding: 0 10%;
}

.answering .keyrow-2[b-3qa2zw24bp] {
    padding: 0 5%;
}

.keyrow-3.answering[b-3qa2zw24bp] {
    padding: 0 10%;
}

.disabled[b-3qa2zw24bp] {
    display: none;
}

.key-enter[b-3qa2zw24bp] {
    min-width: 50px;
    max-width: 70px;
    padding-bottom: 18px;
    font-size: 12px;
}

.key-del[b-3qa2zw24bp] {
    max-width: 50px;
    font-size: 12px;
    padding-bottom: 0px;
}

.key-space[b-3qa2zw24bp] {
    max-width: 120px;
}

.cost[b-3qa2zw24bp] {
    position: absolute;
    bottom: 0;
    color: white;
    background-color: var(--dark);
    width: 100%;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border: solid 1px var(--dark);
}

.win[b-3qa2zw24bp] {
    background-color: #6aaa64;
}

.lose[b-3qa2zw24bp] {
    background-color: lightcoral;
}

.link[b-3qa2zw24bp] {
    color: black;
    text-decoration: underline;
}

.bottom-row[b-3qa2zw24bp] {
    height: 40px;
    font-size: 12px;
}

.ghost[b-3qa2zw24bp] {
    background-color: rgba(0,0,0,0.05);
    padding-bottom: 0px;
}

    .ghost div[b-3qa2zw24bp] {
        visibility: hidden;
    }

[b-3qa2zw24bp] .answering input {
    box-shadow: 1px 1px;
}

[b-3qa2zw24bp] .letters input {
    background-color: #F5F5F5;
    box-shadow: 1px 1px lightgrey;
}

[b-3qa2zw24bp] .letters > div > div {
    box-shadow: 1px 1px;
}

[b-3qa2zw24bp] .answering > div > div {
    background-color: #F5F5F5;
    box-shadow: 1px 1px lightgrey;
}
/* /Components/Collections/Statistics.razor.rz.scp.css */
.pink[b-ynrwec2f2l] {
    color: pink;
    background-color: transparent;
}

.yellow[b-ynrwec2f2l] {
    color: gold;
    background-color: transparent;
}
/* /Components/CrossFlip.razor.rz.scp.css */
.puzzle-main[b-yw3ca28dtl] {
    height: auto;
    background-color: white;
}

.crossflip-grid[b-yw3ca28dtl] {
    display: grid;
    gap: 0.3125rem;
    perspective: 500px;
    width: 100%;
    min-width: 506px;
    max-width: 759px;
    margin: 0 auto;
    padding-bottom: 0.5rem;
}

/* Weekly mode: smaller tiles and reduced spacing */
.crossflip-grid.weekly-mode[b-yw3ca28dtl] {
    gap: 0.15625rem; /* 50% of normal gap */
    max-width: 885px; /* Accommodate up to 14 tiles wide */
    min-width: 590px;
    width: 100%;
}

.crossflip-grid.weekly-mode .tile-button[b-yw3ca28dtl] {
    font-size: 0.9375rem; /* 75% of 1.25rem */
    border-radius: 0.28125rem; /* 75% of 0.375rem */
}

.grid-cell[b-yw3ca28dtl] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
}

.grid-cell.empty[b-yw3ca28dtl] {
    visibility: hidden;
}

.tile-wrapper[b-yw3ca28dtl] {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    position: relative;
}

.tile-button[b-yw3ca28dtl] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    font-size: 1.25rem;
    font-weight: bold;
    transition: transform 0.5s;
    backface-visibility: hidden;
    cursor: pointer;
    background-color: #f5f5f5;
    box-shadow: 2px 2px;
    border: 1px solid #000;
    pointer-events: auto;
}

.tile-button.back[b-yw3ca28dtl] {
    transform: rotateY(180deg);
}

.tile-button:hover[b-yw3ca28dtl] {
    background-color: #e0e0e0;
}

.clue-number[b-yw3ca28dtl] {
    position: absolute;
    top: 0.15rem;
    left: 0.25rem;
    font-size: 0.65rem;
    font-weight: normal;
    opacity: 0.6;
}

.clues-section[b-yw3ca28dtl] {
    max-width: 400px;
    margin: 0 auto;
}

.clues-list[b-yw3ca28dtl] {
    text-align: left;
}

.clues-list p[b-yw3ca28dtl] {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Responsive scaling for smaller screens */
@media (max-width: 768px) {
    .crossflip-grid[b-yw3ca28dtl] {
        width: 95vw;
        min-width: unset;
        max-width: 500px;
        gap: 0.4375rem;
    }

    .crossflip-grid.weekly-mode[b-yw3ca28dtl] {
        width: 95vw;
        max-width: 95vw; /* Scale to viewport width */
        min-width: unset;
        gap: 0.21875rem; /* 50% of normal mobile gap */
    }

    .crossflip-grid.weekly-mode .tile-button[b-yw3ca28dtl] {
        font-size: 0.75rem; /* 75% of 1rem */
    }

    .tile-button[b-yw3ca28dtl] {
        font-size: 1rem;
        border-radius: 0.3rem;
    }

    .clue-number[b-yw3ca28dtl] {
        font-size: 0.55rem;
        top: 0.1rem;
        left: 0.2rem;
    }
}

@media (max-width: 480px) {
    .crossflip-grid[b-yw3ca28dtl] {
        width: 95vw;
        min-width: unset;
        max-width: 350px;
        gap: 0.25rem;
    }

    .crossflip-grid.weekly-mode[b-yw3ca28dtl] {
        width: 95vw;
        max-width: 95vw; /* Scale to viewport width */
        min-width: unset;
        gap: 0.125rem; /* 50% of normal small mobile gap */
    }

    .crossflip-grid.weekly-mode .tile-button[b-yw3ca28dtl] {
        font-size: 0.65625rem; /* 75% of 0.875rem */
    }

    .tile-button[b-yw3ca28dtl] {
        font-size: 0.875rem;
        border-radius: 0.25rem;
        box-shadow: 1px 1px;
    }

    .clue-number[b-yw3ca28dtl] {
        font-size: 0.45rem;
        top: 0.05rem;
        left: 0.1rem;
    }

    .clues-list p[b-yw3ca28dtl] {
        font-size: 0.85rem;
    }
}

@media (max-width: 360px) {
    .crossflip-grid.weekly-mode[b-yw3ca28dtl] {
        width: 98vw;
        max-width: 98vw;
        gap: 0.0625rem; /* Even smaller gap for very small screens */
    }

    .crossflip-grid.weekly-mode .tile-button[b-yw3ca28dtl] {
        font-size: 0.5625rem; /* Even smaller font for very small screens */
        border-radius: 0.1875rem;
    }
}

/* Dark mode styles */
body:has(.crossflip-puzzle.dark-mode)[b-yw3ca28dtl] {
    background-color: #000000 !important;
    min-height: 100vh !important;
}

.crossflip-puzzle.dark-mode[b-yw3ca28dtl] {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Dark mode for how-to section */
body:has(.crossflip-puzzle.dark-mode) .puzzle-container[b-yw3ca28dtl] {
    background-color: #000000 !important;
}

.crossflip-puzzle.dark-mode .stats-toolbar[b-yw3ca28dtl] {
    background: #2a2a2a !important;
}

.crossflip-puzzle.dark-mode .stats-toolbar > div[b-yw3ca28dtl] {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

.crossflip-puzzle.dark-mode .stats-toolbar span[b-yw3ca28dtl] {
    color: #ffffff !important;
}

.crossflip-puzzle.dark-mode .stats-toolbar a[b-yw3ca28dtl] {
    color: #3c9cff !important;
}

.crossflip-puzzle.dark-mode .tile-button[b-yw3ca28dtl] {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

.crossflip-puzzle.dark-mode .tile-button:hover[b-yw3ca28dtl] {
    background-color: #3a3a3a !important;
}

.crossflip-puzzle.dark-mode .tile-button.locked[b-yw3ca28dtl] {
    background-color: #4CAF50 !important;
    color: white !important;
}

body:has(.crossflip-puzzle.dark-mode)[b-yw3ca28dtl]  footer,
body:has(.crossflip-puzzle.dark-mode)[b-yw3ca28dtl]  .footer,
body:has(.crossflip-puzzle.dark-mode)[b-yw3ca28dtl]  .page-footer {
    color: #000000 !important;
}

body:has(.crossflip-puzzle.dark-mode)[b-yw3ca28dtl]  footer a,
body:has(.crossflip-puzzle.dark-mode)[b-yw3ca28dtl]  .footer a,
body:has(.crossflip-puzzle.dark-mode)[b-yw3ca28dtl]  .page-footer a {
    color: #000000 !important;
}

.crossflip-puzzle.dark-mode .content[b-yw3ca28dtl] {
    color: #ffffff !important;
}

.crossflip-puzzle.dark-mode .content h3[b-yw3ca28dtl] {
    color: #ffffff !important;
}

.crossflip-puzzle.dark-mode .content p[b-yw3ca28dtl] {
    color: #ffffff !important;
}

.crossflip-puzzle.dark-mode .content li[b-yw3ca28dtl] {
    color: #ffffff !important;
}

body:has(.crossflip-puzzle.dark-mode) .puzzle-container .content[b-yw3ca28dtl] {
    color: #ffffff !important;
}

body:has(.crossflip-puzzle.dark-mode) .puzzle-container .content h3[b-yw3ca28dtl] {
    color: #ffffff !important;
}

body:has(.crossflip-puzzle.dark-mode) .puzzle-container .content p[b-yw3ca28dtl] {
    color: #ffffff !important;
}

body:has(.crossflip-puzzle.dark-mode) .puzzle-container .content li[b-yw3ca28dtl] {
    color: #ffffff !important;
}
/* /Components/CrossFlipEditor.razor.rz.scp.css */
.crossflip-grid[b-1txjfqa8ik] {
    display: grid;
    gap: 0.3125rem;
    perspective: 500px;
    width: 100%;
    min-width: 400px;
    max-width: 600px;
    margin: 0 auto;
}

/* Weekly mode: smaller tiles and reduced spacing */
.crossflip-grid.weekly-mode[b-1txjfqa8ik] {
    gap: 0.15625rem; /* 50% of normal gap */
    max-width: 700px; /* Accommodate up to 14 tiles wide */
    min-width: 467px;
}

.crossflip-grid.weekly-mode .tile-button[b-1txjfqa8ik] {
    font-size: 0.9375rem; /* 75% of 1.25rem */
    border-radius: 0.28125rem; /* 75% of 0.375rem */
}

.grid-cell[b-1txjfqa8ik] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-cell.empty[b-1txjfqa8ik] {
    visibility: hidden;
}

.tile-wrapper[b-1txjfqa8ik] {
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    position: relative;
}

.tile-button[b-1txjfqa8ik] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    font-size: 1.25rem;
    font-weight: bold;
    transition: transform 0.5s;
    backface-visibility: hidden;
    cursor: pointer;
    background-color: #f5f5f5;
    box-shadow: 2px 2px;
    border: 1px solid #000;
    pointer-events: auto;
}

.tile-button.back[b-1txjfqa8ik] {
    transform: rotateY(180deg);
}

.tile-button:hover:not(:disabled)[b-1txjfqa8ik] {
    background-color: #e0e0e0;
}

.tile-button:disabled[b-1txjfqa8ik] {
    cursor: default;
}

.clues-section[b-1txjfqa8ik] {
    max-width: 400px;
    margin: 0 auto;
}

.clues-list[b-1txjfqa8ik] {
    text-align: left;
}

.clues-list p[b-1txjfqa8ik] {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.yellow[b-1txjfqa8ik] {
    background-color: #ffd700;
}

/* Responsive scaling for smaller screens */
@media (max-width: 768px) {
    .crossflip-grid[b-1txjfqa8ik] {
        width: 95vw;
        min-width: unset;
        max-width: 500px;
        gap: 0.4375rem;
    }

    .crossflip-grid.weekly-mode[b-1txjfqa8ik] {
        max-width: 583px; /* Wider for weekly */
        gap: 0.21875rem; /* 50% of normal mobile gap */
    }

    .crossflip-grid.weekly-mode .tile-button[b-1txjfqa8ik] {
        font-size: 0.75rem; /* 75% of 1rem */
    }

    .tile-button[b-1txjfqa8ik] {
        font-size: 1rem;
        border-radius: 0.3rem;
    }
}

@media (max-width: 480px) {
    .crossflip-grid[b-1txjfqa8ik] {
        width: 95vw;
        min-width: unset;
        max-width: 350px;
        gap: 0.25rem;
    }

    .crossflip-grid.weekly-mode[b-1txjfqa8ik] {
        max-width: 408px; /* Wider for weekly */
        gap: 0.125rem; /* 50% of normal small mobile gap */
    }

    .crossflip-grid.weekly-mode .tile-button[b-1txjfqa8ik] {
        font-size: 0.65625rem; /* 75% of 0.875rem */
    }

    .tile-button[b-1txjfqa8ik] {
        font-size: 0.875rem;
        border-radius: 0.25rem;
        box-shadow: 1px 1px;
    }
}
/* /Components/Hex3d/Hex3dBoard.razor.rz.scp.css */
.h3-scene[b-rcc2693nsn] {
    width: 100%;
}

/* Full content width minus a rail on each side (--h3-rail comes from wwwroot/css/hex3d.css). */
.h3-bounds[b-rcc2693nsn] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    max-width: calc(100% - 2 * var(--h3-rail, 0px));
    margin-inline: auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* The stage takes the board's own shape (--h3-aspect, set from hex3d.js), capped by the
   viewport: upright on a phone that's a snug fit with the controls straight below;
   on wide screens the cap wins and the scenery fills out the sides. */
.h3-stage[b-rcc2693nsn] {
    position: relative;
    width: 100%;
    aspect-ratio: var(--h3-aspect, 1.6);
    min-height: 200px;
    max-height: clamp(380px, calc(100vh - 230px), 980px);
    border-radius: 14px;
    overflow: hidden;
    /* Shows only before three.js paints (the tiles cover the whole canvas). */
    background: #4e7a3a;
    box-shadow: 0 14px 34px -18px rgba(30, 40, 20, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.h3-mount[b-rcc2693nsn] {
    position: absolute;
    inset: 0;
}

/* The canvas is created by three.js, so it needs ::deep to pick up the scoped style. */
.h3-stage[b-rcc2693nsn]  .hex3d-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* A long press turns anticlockwise, so keep iOS's callout and text selection out of it. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.h3-error[b-rcc2693nsn] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1rem;
    text-align: center;
    color: #f2f7e8;
}

.h3-toolbar[b-rcc2693nsn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.h3-btn[b-rcc2693nsn] {
    padding: 0.4rem 1rem;
    border-radius: 8px;
    border: 2px solid #8a6a3a;
    background: linear-gradient(#f6ecd6, #e6d3ab);
    color: #4a3418;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 0 #8a6a3a;
}

.h3-btn:hover:not(:disabled)[b-rcc2693nsn] { filter: brightness(1.05); }
.h3-btn:active:not(:disabled)[b-rcc2693nsn] { transform: translateY(2px); box-shadow: none; }
.h3-btn:disabled[b-rcc2693nsn] { opacity: 0.55; cursor: default; }

/* ---- Village settings ---------------------------------------------------------- */
.h3-settings[b-rcc2693nsn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem auto 0;
    padding: 0.8rem 1rem;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 2px solid #d8c49a;
    background: #faf3e3;
    color: #4a3418;
}

.h3-setting[b-rcc2693nsn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
}

.h3-setting-label[b-rcc2693nsn] {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    min-width: 5.5rem;
}

.h3-seg[b-rcc2693nsn] {
    display: inline-flex;
    border: 2px solid #8a6a3a;
    border-radius: 8px;
    overflow: hidden;
}

.h3-seg-btn[b-rcc2693nsn] {
    padding: 0.3rem 0.8rem;
    border: none;
    border-left: 1px solid #c9ad78;
    background: #f6ecd6;
    color: #4a3418;
    font-weight: 700;
    cursor: pointer;
    min-width: 2.4rem;
}

.h3-seg-btn:first-child[b-rcc2693nsn] { border-left: none; }
.h3-seg-btn:hover:not(:disabled):not(.sel)[b-rcc2693nsn] { background: #efe0bf; }
.h3-seg-btn.sel[b-rcc2693nsn] { background: #6fa543; color: #fff; }
.h3-seg-btn:disabled[b-rcc2693nsn] { cursor: default; }

.h3-slider[b-rcc2693nsn] {
    flex: 1;
    max-width: 240px;
    display: flex;
    flex-direction: column;
}

.h3-slider input[type="range"][b-rcc2693nsn] {
    width: 100%;
    accent-color: #6fa543;
    cursor: pointer;
}

.h3-slider-ticks[b-rcc2693nsn] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.6;
}

.h3-slider-ticks .sel[b-rcc2693nsn] { opacity: 1; color: #2f5a17; }

.h3-setting-note[b-rcc2693nsn] {
    margin: -0.2rem 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: center;
    opacity: 0.8;
}

.h3-setting-note.warn[b-rcc2693nsn] { color: #a3401c; opacity: 1; }

/* Covers the canvas while a new village is generated. */
.h3-busy[b-rcc2693nsn] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(30, 23, 16, 0.35);
    color: #fff8e6;
    font-weight: 800;
    letter-spacing: 0.05em;
}

@media (max-width: 420px) {
    .h3-setting[b-rcc2693nsn] { flex-direction: column; align-items: stretch; gap: 0.3rem; }
    .h3-seg[b-rcc2693nsn] { align-self: center; }
    .h3-slider[b-rcc2693nsn] { max-width: none; }
}

/* ---- Phones: edge to edge ------------------------------------------------------- */
@media (max-width: 600px) {
    .h3-bounds[b-rcc2693nsn] { padding: 0; }
    .h3-stage[b-rcc2693nsn] { border-radius: 0; box-shadow: none; }
    .h3-toolbar[b-rcc2693nsn] { padding: 0 8px; }
    .h3-settings[b-rcc2693nsn] { width: calc(100% - 16px); }
}

/* ---- Buttons over the board: full screen, and the play pages' reset + timer --------------- */
.h3-corner-btn[b-rcc2693nsn] {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    z-index: 3;
}

.h3-icon-btn[b-rcc2693nsn] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border: 2px solid #8a6a3a;
    background: rgba(250, 243, 227, 0.92);
    color: #4a3418;
    cursor: pointer;
    box-shadow: 0 2px 0 #8a6a3a;
}

.h3-icon-btn svg[b-rcc2693nsn] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.h3-icon-btn:active[b-rcc2693nsn] { transform: translateY(2px); box-shadow: none; }

.h3-play-bar[b-rcc2693nsn] {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    z-index: 3;
    display: flex;
    gap: 8px;
}

/* Shown, the timer button widens into a pill with the time beside the clock. */
.h3-timer.shown[b-rcc2693nsn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 0 12px 0 8px;
}

.h3-timer-text[b-rcc2693nsn] {
    min-width: 2.6em;
    font-weight: 800;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.h3-timer.done[b-rcc2693nsn] { background: linear-gradient(#c6e6a2, #9ccb6c); color: #24470f; }

/* ---- Reset confirmation: over the board, so it also works in full screen ------------- */
.h3-modal-backdrop[b-rcc2693nsn] {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 12px;
    background: rgba(30, 23, 16, 0.45);
}

.h3-modal[b-rcc2693nsn] {
    width: min(320px, 100%);
    padding: 1rem 1.2rem;
    box-sizing: border-box;
    border-radius: 12px;
    border: 2px solid #d8c49a;
    background: #faf3e3;
    color: #4a3418;
    text-align: center;
    box-shadow: 0 10px 30px -10px rgba(30, 23, 16, 0.6);
}

.h3-modal-title[b-rcc2693nsn] { margin: 0; font-size: 1.15rem; font-weight: 800; }
.h3-modal-text[b-rcc2693nsn] { margin: 0.4rem 0 0.9rem; font-size: 0.9rem; line-height: 1.35; }

.h3-modal-actions[b-rcc2693nsn] {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}

.h3-btn-go[b-rcc2693nsn] { background: linear-gradient(#a6d27a, #6fa543); color: #fff; border-color: #4d7a2a; box-shadow: 0 2px 0 #4d7a2a; }

/* ---- Seed (village code) on /hex3d/seeds ---------------------------------------------- */
.h3-seed[b-rcc2693nsn] {
    align-self: center;
    padding: 0.25rem 0.7rem;
    border-radius: 8px;
    border: 2px dashed #8a6a3a;
    background: #fff;
    color: #2f5a17;
    font-family: ui-monospace, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.h3-seed:hover[b-rcc2693nsn] { background: #eef6e2; text-decoration: underline; }

/* ---- Rotate hint: phones held upright only ------------------------------------------- */
.h3-rotate-hint[b-rcc2693nsn] { display: none; }

@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
    .h3-rotate-hint[b-rcc2693nsn] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0 8px;
        padding: 0.35rem 0.4rem 0.35rem 0.7rem;
        border-radius: 10px;
        border: 2px solid #d8c49a;
        background: #faf3e3;
        color: #4a3418;
        font-size: 0.85rem;
        font-weight: 700;
    }
}

.h3-rotate-icon[b-rcc2693nsn] { font-size: 1.2rem; line-height: 1; }
.h3-rotate-hint > span:nth-child(2)[b-rcc2693nsn] { flex: 1; }

.h3-hint-close[b-rcc2693nsn] {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

/* ---- Floating layout (.hud): full screen, or a phone held sideways ------------------------
   The board fills the viewport, the toolbar becomes a column of icon buttons down the left
   (the board is wider than the screen is tall, so the sides are scenery), and the settings
   open as a drawer on the right. */
.h3-scene.hud .h3-bounds[b-rcc2693nsn] {
    position: relative;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    gap: 0;
}

.h3-scene.hud .h3-stage[b-rcc2693nsn] {
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}

.h3-scene.hud .h3-toolbar[b-rcc2693nsn] {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: calc(8px + env(safe-area-inset-left, 0px));
    transform: translateY(-50%);
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0;
}

.h3-scene.hud .h3-btn[b-rcc2693nsn] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.h3-scene.hud .h3-btn.sel[b-rcc2693nsn] { background: linear-gradient(#a6d27a, #6fa543); color: #fff; }
.h3-scene.hud .h3-btn-label[b-rcc2693nsn] { display: none; }

.h3-scene.hud .h3-settings[b-rcc2693nsn] {
    display: none;
    position: absolute;
    z-index: 4;
    top: calc(56px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    bottom: 8px;
    width: min(340px, calc(100% - 80px));
    max-width: none;
    margin: 0;
    overflow-y: auto;
    justify-content: flex-start;
    box-shadow: 0 10px 30px -10px rgba(30, 23, 16, 0.6);
}

.h3-scene.hud.settings-open .h3-settings[b-rcc2693nsn] { display: flex; }

/* Narrow drawer: stack each setting's label over its control. */
.h3-scene.hud .h3-setting[b-rcc2693nsn] { flex-direction: column; align-items: stretch; gap: 0.3rem; }
.h3-scene.hud .h3-seg[b-rcc2693nsn] { align-self: center; }
.h3-scene.hud .h3-slider[b-rcc2693nsn] { max-width: none; }

/* Full screen held upright: the board spans the width, so the toolbar goes along the bottom
   and the drawer rises above it. */
@media (orientation: portrait) {
    .h3-scene.hud .h3-toolbar[b-rcc2693nsn] {
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }

    .h3-scene.hud .h3-settings[b-rcc2693nsn] {
        top: auto;
        left: 8px;
        right: 8px;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: 65%;
    }
}

/* Full screen: over the whole page. Where the browser can't full-screen an element
   (iPhone Safari) this overlay is the full screen; elsewhere it fills the native one. */
.h3-scene.immersive[b-rcc2693nsn] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #4e7a3a;
}

.h3-scene.immersive .h3-bounds[b-rcc2693nsn] {
    max-width: none;
    height: 100%;
}
/* /Components/Hex3d/Hex3dSoundBoard.razor.rz.scp.css */
.sb[b-ciqp49n3pq] {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px 2rem;
    box-sizing: border-box;
}

.sb-intro[b-ciqp49n3pq] {
    margin: 0 0 1rem;
    line-height: 1.45;
    opacity: 0.85;
}

.sb-controls[b-ciqp49n3pq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.sb-controls label[b-ciqp49n3pq] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sb-grid[b-ciqp49n3pq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.sb-card[b-ciqp49n3pq] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    background: rgba(78, 122, 58, 0.1);
    border: 2px solid rgba(78, 122, 58, 0.25);
    transition: border-color 0.15s;
}

.sb-card.last[b-ciqp49n3pq] {
    border-color: #4e7a3a;
}

.sb-card h3[b-ciqp49n3pq] {
    margin: 0;
    font-size: 1.05rem;
}

.sb-card p[b-ciqp49n3pq] {
    margin: 0;
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.35;
    opacity: 0.8;
}

.sb-buttons[b-ciqp49n3pq] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.sb-buttons button[b-ciqp49n3pq] {
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    border: 1px solid #4e7a3a;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.sb-buttons button.sb-play[b-ciqp49n3pq] {
    flex: 1;
    background: #4e7a3a;
    color: #fff;
}

.sb-buttons button:active[b-ciqp49n3pq] {
    transform: translateY(1px);
}

.sb-back[b-ciqp49n3pq] {
    margin-top: 1.5rem;
}
/* /Components/Hexlight/HexlightGame.razor.rz.scp.css */
/* Hexlight — light the way through the dungeon ------------------------------ */

.hl-scene[b-b5jsst1g0z] {
    /* repoint local tokens at the shared parchment RPG theme (rpg-theme.css) */
    --hl-gold: var(--rpg-gold);
    --hl-gold-bright: var(--rpg-gold-bright);
    --hl-ink: var(--rpg-ink);
    --hl-ink-dim: var(--rpg-ink-dim);

    /* the rail-ads layout sizes the centre column from its CONTENT width, so
       percentage widths are circular here — use viewport units to hold the
       scene open. 600px matches the puzzle column (.puzzle-container max-width). */
    width: 80vw;
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 1.1rem 1rem 1.25rem;
    text-align: center;
    border-radius: 18px;
    background:
        radial-gradient(120% 90% at 50% 0%, #fbf5e6 0%, var(--rpg-parchment) 55%, var(--rpg-parchment-dim) 100%);
    border: 1px solid var(--rpg-border);
    box-shadow: var(--rpg-shadow), var(--rpg-shadow-inset);
    user-select: none;
    -webkit-user-select: none;
}

/* ---- Hint ------------------------------------------------------------------ */
.hl-hint[b-b5jsst1g0z] {
    font-family: var(--rpg-font-pixel);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hl-ink-dim);
    margin: 0.2rem 0 0.85rem;
}

/* ---- Progress chips ---------------------------------------------------------- */
.hl-quests[b-b5jsst1g0z] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.hl-quest[b-b5jsst1g0z] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--hl-ink-dim);
    background: var(--rpg-parchment-dim);
    border: 1px solid var(--rpg-border);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.hl-quest .hl-q-ico[b-b5jsst1g0z] { font-size: 0.85rem; filter: grayscale(0.7) brightness(0.9); transition: filter 0.25s ease; }

.hl-quest.done[b-b5jsst1g0z] {
    color: var(--rpg-wood);
    border-color: var(--rpg-gold);
    background: rgba(232, 193, 90, 0.28);
    box-shadow: 0 0 12px rgba(201, 154, 58, 0.28);
}

.hl-quest.done .hl-q-ico[b-b5jsst1g0z] { filter: none; }

.hl-quest.done .hl-q-label[b-b5jsst1g0z]::after {
    content: " \2713";
    color: var(--hl-gold-bright);
}

/* ---- Board ---------------------------------------------------------------- */
.hl-board[b-b5jsst1g0z] {
    position: relative;
    border-radius: 14px;
    background: radial-gradient(130% 110% at 50% 0%, #38314a 0%, #292339 55%, #211c2e 100%);
    box-shadow: 0 8px 22px rgba(20, 15, 35, 0.45);
    transition: box-shadow 0.5s ease;
    outline: none;
}

.hl-board:focus-visible[b-b5jsst1g0z] {
    box-shadow: 0 0 0 2px rgba(232, 193, 90, 0.55), 0 8px 22px rgba(20, 15, 35, 0.45);
}

.hl-svg[b-b5jsst1g0z] {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* ---- Light ---------------------------------------------------------------- */
/* the warm wash a beam lays over each hex it crosses — the walkable ground */
.hl-lit[b-b5jsst1g0z] {
    fill: #ffcf7a;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hl-lit.on[b-b5jsst1g0z] { opacity: 0.3; }

.hl-beam-glow[b-b5jsst1g0z] { stroke: #ffd98a; stroke-width: 19; stroke-linecap: round; opacity: 0.13; pointer-events: none; }
.hl-beam[b-b5jsst1g0z] { stroke: #ffe7ae; stroke-width: 7; stroke-linecap: round; opacity: 0.35; pointer-events: none; }

/* ---- Lamps ----------------------------------------------------------------- */
.hl-rot[b-b5jsst1g0z] {
    transform-origin: 0 0;
    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.hl-shadow[b-b5jsst1g0z] { filter: drop-shadow(0 1.4px 1.1px rgba(8, 5, 15, 0.55)); }

.hl-lamp-plinth[b-b5jsst1g0z] { fill: #33291a; stroke: #17110a; stroke-width: 1.4; }
.hl-lamp-aperture[b-b5jsst1g0z] { fill: #ffd98a; stroke: #8a6d1d; stroke-width: 0.8; }
.hl-lamp-body[b-b5jsst1g0z] { fill: #4a3a22; stroke: #241b0e; stroke-width: 1.3; }
.hl-lamp-flame[b-b5jsst1g0z] { fill: #ffce6a; animation: hl-flicker-b-b5jsst1g0z 2.6s ease-in-out infinite; }
.hl-lamp-core[b-b5jsst1g0z] { fill: #fff4d8; }

@keyframes hl-flicker-b-b5jsst1g0z {
    0%, 100% { opacity: 1; }
    38% { opacity: 0.82; }
    62% { opacity: 0.94; }
    80% { opacity: 0.86; }
}

/* ---- Gem ------------------------------------------------------------------- */
.hl-gem[b-b5jsst1g0z] { transition: opacity 0.4s ease; }
.hl-gem.taken[b-b5jsst1g0z] { opacity: 0; }

.hl-gem-body[b-b5jsst1g0z] {
    fill: #4d9e94;
    stroke: #2a6b63;
    stroke-width: 1.4;
    stroke-linejoin: round;
    transition: fill 0.3s ease;
}

.hl-gem-facet[b-b5jsst1g0z] { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }

.hl-gem.lit .hl-gem-body[b-b5jsst1g0z] { fill: #8ff2e6; }
.hl-gem.lit[b-b5jsst1g0z] { filter: drop-shadow(0 0 7px rgba(140, 255, 238, 0.85)); }

/* ---- Hero ------------------------------------------------------------------ */
.hl-hero[b-b5jsst1g0z] { transition: transform 0.22s ease; pointer-events: none; }
.hl-hero-body[b-b5jsst1g0z] { fill: #4c7a3f; stroke: #27431f; stroke-width: 1.3; }
.hl-hero-head[b-b5jsst1g0z] { fill: #c9a06a; stroke: #5e4526; stroke-width: 1.1; }
.hl-hero-lantern[b-b5jsst1g0z] { fill: #ffe7ae; stroke: #8a6d1d; stroke-width: 0.9; }

/* ---- Interaction layer --------------------------------------------------------- */
.hl-hit[b-b5jsst1g0z] {
    fill: rgba(0, 0, 0, 0);
    stroke: transparent;
    stroke-width: 2;
    cursor: pointer;
    transition: stroke 0.15s ease, fill 0.15s ease;
}

.hl-hit:hover[b-b5jsst1g0z] { stroke: rgba(255, 215, 106, 0.75); fill: rgba(255, 235, 170, 0.08); }

.hl-hit.inert[b-b5jsst1g0z] { cursor: default; }
.hl-hit.inert:hover[b-b5jsst1g0z] { stroke: transparent; fill: rgba(0, 0, 0, 0); }

/* ---- D-pad + toolbar ----------------------------------------------------------------- */
.hl-dpad[b-b5jsst1g0z] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.hl-dpad-btn[b-b5jsst1g0z] { min-width: 3.1rem; font-size: 1.05rem; padding: 0.42rem 0.6rem; }

.hl-toolbar[b-b5jsst1g0z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.hl-btn[b-b5jsst1g0z] {
    font-family: var(--rpg-font-pixel);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.95rem;
    color: var(--rpg-wood);
    background: linear-gradient(#f6ebd0, var(--rpg-parchment-dim));
    border: 1px solid var(--rpg-border);
    border-radius: 9px;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(90, 74, 54, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.hl-btn:hover[b-b5jsst1g0z] {
    border-color: var(--rpg-gold);
    box-shadow: 0 2px 10px rgba(201, 154, 58, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    filter: brightness(1.04);
}

.hl-btn:active[b-b5jsst1g0z] { transform: translateY(2px); box-shadow: 0 0 3px rgba(90, 74, 54, 0.4); }

.hl-btn-gold[b-b5jsst1g0z] {
    color: #2c2109;
    background: linear-gradient(#ffe08a, var(--rpg-gold));
    border-color: var(--rpg-border);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.hl-ico[b-b5jsst1g0z] { font-size: 0.95rem; }

/* ---- Temporary tuning controls (prototype only) ------------------------------------------ */
.hl-devbar[b-b5jsst1g0z] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem 1.1rem;
    margin-top: 0.8rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    border: 1px dashed var(--rpg-border);
    background: rgba(90, 74, 54, 0.05);
}

.hl-dev-group[b-b5jsst1g0z] { display: inline-flex; align-items: center; gap: 0.3rem; }

.hl-dev-label[b-b5jsst1g0z] {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hl-ink-dim);
    margin-right: 0.15rem;
}

.hl-dev-btn[b-b5jsst1g0z] {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--hl-ink-dim);
    background: rgba(90, 74, 54, 0.06);
    border: 1px solid var(--rpg-border);
    border-radius: 7px;
    padding: 0.28rem 0.55rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.hl-dev-btn:hover[b-b5jsst1g0z] { border-color: var(--rpg-gold); color: var(--hl-ink); }

.hl-dev-btn.sel[b-b5jsst1g0z] {
    color: #2c2109;
    background: linear-gradient(#ffe08a, var(--rpg-gold));
    border-color: var(--rpg-border);
}

.hl-dev-slider[b-b5jsst1g0z] { width: 110px; accent-color: var(--hl-gold-bright); }

.hl-dev-warn[b-b5jsst1g0z] { font-size: 0.7rem; color: #e08a7a; }

/* ---- Victory ---------------------------------------------------------------------------- */
.hl-board.is-solved[b-b5jsst1g0z] {
    box-shadow:
        0 0 34px rgba(201, 154, 58, 0.4),
        0 8px 22px rgba(20, 15, 35, 0.45);
}

.hl-victory[b-b5jsst1g0z] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 16, 0.55);
    backdrop-filter: blur(3px);
    border-radius: 14px;
    animation: hl-fade-b-b5jsst1g0z 0.4s ease;
    z-index: 5;
}

.hl-victory-card[b-b5jsst1g0z] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.4rem 2.2rem 1.5rem;
    border-radius: 14px;
    background: linear-gradient(#fbf5e6, var(--rpg-parchment-dim));
    border: 1px solid var(--rpg-gold);
    box-shadow: 0 0 40px rgba(201, 154, 58, 0.28), 0 14px 30px rgba(20, 15, 35, 0.5);
    animation: hl-rise-b-b5jsst1g0z 0.45s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.hl-victory-close[b-b5jsst1g0z] {
    position: absolute;
    top: 0.4rem;
    right: 0.55rem;
    background: none;
    border: none;
    padding: 0.1rem 0.3rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--hl-ink-dim);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
}

.hl-victory-close:hover[b-b5jsst1g0z] { color: var(--hl-gold-bright); transform: scale(1.15); }

.hl-victory-rule[b-b5jsst1g0z] {
    width: 3.5rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--hl-gold-bright), transparent);
}

.hl-victory-title[b-b5jsst1g0z] {
    font-weight: 900;
    letter-spacing: 0.22em;
    color: var(--rpg-wood);
    font-size: 1.15rem;
    text-shadow: 0 0 14px rgba(201, 154, 58, 0.5);
}

.hl-victory-gem[b-b5jsst1g0z] {
    width: 46px;
    height: auto;
    margin: 0.15rem 0;
    filter: drop-shadow(0 0 8px rgba(120, 235, 218, 0.85));
    animation: hl-gem-pop-b-b5jsst1g0z 0.45s cubic-bezier(0.34, 1.5, 0.5, 1) backwards;
}

.hl-victory-gem .hl-gem-body[b-b5jsst1g0z] { fill: #8ff2e6; }

.hl-victory-score[b-b5jsst1g0z] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hl-ink-dim);
    margin-bottom: 0.35rem;
}

@keyframes hl-gem-pop-b-b5jsst1g0z {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes hl-fade-b-b5jsst1g0z {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hl-rise-b-b5jsst1g0z {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Small screens ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* rails are hidden and the layout is a plain column here, so 100% works */
    .hl-scene[b-b5jsst1g0z] { width: 100%; }
}

@media (max-width: 480px) {
    .hl-scene[b-b5jsst1g0z] { padding: 0.8rem 0.55rem 1rem; border-radius: 12px; }
    .hl-quest[b-b5jsst1g0z] { font-size: 0.68rem; padding: 0.22rem 0.55rem; }
    .hl-victory-card[b-b5jsst1g0z] { padding: 1.1rem 1.4rem 1.2rem; }
    .hl-dpad-btn[b-b5jsst1g0z] { min-width: 2.7rem; }
}
/* /Components/Isogrid/IsogridBoard.razor.rz.scp.css */
.ig-scene[b-7783bmhgz6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* The page column shrinks to fit its content, so the scene sets its own width:
       the column's 600px cap, or the screen on a phone. */
    width: min(600px, 100vw);
    padding: 0 16px;
    box-sizing: border-box;
}

/* The stage takes the board's own shape (--ig-aspect, from isogrid.js), capped so the
   controls stay on screen below it. */
.ig-stage[b-7783bmhgz6] {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ig-aspect, 1.45);
    min-height: 240px;
    max-height: clamp(300px, calc(100vh - 280px), 760px);
    border-radius: 14px;
    overflow: hidden;
    /* Shows only before three.js paints. */
    background: #4e7a3a;
    box-shadow: 0 14px 34px -18px rgba(30, 40, 20, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.ig-mount[b-7783bmhgz6] {
    position: absolute;
    inset: 0;
}

/* The canvases are created by isogrid.js, so they need ::deep to pick up scoped styles. */
.ig-stage[b-7783bmhgz6]  .isogrid-canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* The power-ball hopper, top left over the scenery. Sized from the stage height in JS. */
.ig-stage[b-7783bmhgz6]  .isogrid-hopper {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
    z-index: 2;
    pointer-events: none;
}

.ig-error[b-7783bmhgz6] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1rem;
    text-align: center;
    color: #f2f7e8;
}

/* The HUD: full screen, restart, time, foes left and the hero's health, in a narrow
   column down the right edge. isogrid.js measures its width and keeps the board clear
   of it (as it does the hopper on the left). */
.ig-hud[b-7783bmhgz6] {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 44px;
}

.ig-stat[b-7783bmhgz6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0.2rem 0;
    box-sizing: border-box;
    border-radius: 8px;
    background: rgba(250, 243, 227, 0.92);
    border: 2px solid #8a6a3a;
    color: #4a3418;
    line-height: 1.1;
}

.ig-stat small[b-7783bmhgz6],
.ig-hp b[b-7783bmhgz6] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ig-stat b[b-7783bmhgz6] {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.ig-stat.ig-gems[b-7783bmhgz6] {
    background: rgba(226, 248, 255, 0.94);
    border-color: #3f8fae;
    color: #1f5a72;
}

.ig-score[b-7783bmhgz6] {
    font-size: 1.15rem;
    font-weight: 900;
    color: #1f5a72;
}

/* Health: a vertical bar filling the rest of the column (--ig-hp = hp / max). */
.ig-hp[b-7783bmhgz6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
    min-height: 60px;
    max-height: 150px;
    width: 100%;
    padding: 5px 0;
    box-sizing: border-box;
    border-radius: 8px;
    background: rgba(250, 243, 227, 0.92);
    border: 2px solid #8a6a3a;
    color: #4a3418;
}

.ig-hp-bar[b-7783bmhgz6] {
    position: relative;
    flex: 1;
    width: 14px;
    border-radius: 7px;
    background: #4a3a34;
    overflow: hidden;
}

.ig-hp-bar span[b-7783bmhgz6] {
    position: absolute;
    inset: auto 0 0 0;
    height: calc(var(--ig-hp, 1) * 100%);
    background: linear-gradient(#a6f08f, #5cc24a);
    transition: height 0.2s ease-out;
}

.ig-hp.low .ig-hp-bar span[b-7783bmhgz6] { background: linear-gradient(#ff9a7a, #d2483c); }
.ig-hp b[b-7783bmhgz6] { font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.ig-icon-btn[b-7783bmhgz6] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    border: 2px solid #8a6a3a;
    background: rgba(250, 243, 227, 0.92);
    color: #4a3418;
    cursor: pointer;
    box-shadow: 0 2px 0 #8a6a3a;
    touch-action: manipulation;
}

.ig-icon-btn svg[b-7783bmhgz6] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ig-banner[b-7783bmhgz6] {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    width: min(300px, calc(100% - 32px));
    padding: 1rem 1.25rem;
    border-radius: 14px;
    border: 2px solid #8a6a3a;
    background: rgba(250, 243, 227, 0.96);
    color: #4a3418;
    text-align: center;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5);
    animation: ig-fade-in-b-7783bmhgz6 0.25s ease-out both;
}

/* Results wait a moment, so the last strike (or the hero's fall) plays out first. */
.ig-banner-late[b-7783bmhgz6] { animation-delay: 0.9s; }

.ig-btn-go[b-7783bmhgz6] {
    padding: 0.45rem 1.4rem;
    font-size: 1rem;
}

.ig-key-inline[b-7783bmhgz6] {
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 0.7rem;
    opacity: 0.6;
}

.ig-banner p[b-7783bmhgz6] { margin: 0 0 0.6rem; }

.ig-banner-title[b-7783bmhgz6] {
    font-size: 1.5rem;
    font-weight: 900;
}

@keyframes ig-fade-in-b-7783bmhgz6 {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Move pad and attack button. */
.ig-controls[b-7783bmhgz6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

/* A plus-shaped D-pad (each button names its grid-area). */
.ig-pad[b-7783bmhgz6] {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 48px);
    grid-template-areas:
        ".    up    ."
        "left .     right"
        ".    down  .";
    gap: 4px;
}

.ig-btn[b-7783bmhgz6] {
    border-radius: 10px;
    border: 2px solid #8a6a3a;
    background: linear-gradient(#f6ecd6, #e6d3ab);
    color: #4a3418;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 #8a6a3a;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ig-btn:active[b-7783bmhgz6] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #8a6a3a;
}

.ig-btn-small[b-7783bmhgz6] {
    padding: 0.3rem 0.9rem;
}

.ig-move[b-7783bmhgz6] {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 48px;
    padding: 0;
}

.ig-move svg[b-7783bmhgz6],
.ig-attack svg[b-7783bmhgz6] {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Round and red; isogrid.js sets data-held while it's charging. */
.ig-attack[b-7783bmhgz6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 96px;
    height: 96px;
    padding: 0;
    border-radius: 50%;
    border-color: #8e2f22;
    background: radial-gradient(circle at 35% 30%, #f28a6c, #d2483c 60%, #a8352a);
    color: #fff;
    box-shadow: 0 4px 0 #8e2f22;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    -webkit-touch-callout: none;
    user-select: none;
}

.ig-attack svg[b-7783bmhgz6] { width: 34px; height: 34px; }

.ig-attack[data-held][b-7783bmhgz6],
.ig-attack:active[b-7783bmhgz6] {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #8e2f22, 0 0 0 6px rgba(242, 194, 48, 0.55);
}

/* The matching key, tucked in the corner; touch screens have no keys to show. */
.ig-key[b-7783bmhgz6] {
    position: absolute;
    top: 3px;
    left: 6px;
    font-size: 0.7rem;
    line-height: 1;
    opacity: 0.55;
    text-transform: none;
    letter-spacing: 0;
}

.ig-attack .ig-key[b-7783bmhgz6] {
    top: auto;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    opacity: 0.8;
    font-size: 0.65rem;
}

@media (hover: none) {
    .ig-key[b-7783bmhgz6] { display: none; }
}

.ig-option[b-7783bmhgz6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #4a3418;
}

.ig-option-label[b-7783bmhgz6] {
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ig-seg[b-7783bmhgz6] {
    display: inline-flex;
    border: 2px solid #8a6a3a;
    border-radius: 8px;
    overflow: hidden;
}

.ig-seg-btn[b-7783bmhgz6] {
    padding: 0.3rem 0.9rem;
    border: none;
    border-left: 1px solid #c9ad78;
    background: #f6ecd6;
    color: #4a3418;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.ig-seg-btn:first-child[b-7783bmhgz6] { border-left: none; }
.ig-seg-btn:hover:not(.sel)[b-7783bmhgz6] { background: #efe0bf; }
.ig-seg-btn.sel[b-7783bmhgz6] { background: #6fa543; color: #fff; }

/* ---- Full screen: the stage fills the viewport, controls float at the bottom corners ---- */
.ig-scene.immersive[b-7783bmhgz6] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    padding: 0;
    background: #1e1710;
}

.ig-scene.immersive .ig-stage[b-7783bmhgz6] {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}

.ig-scene.immersive .ig-controls[b-7783bmhgz6] {
    position: absolute;
    left: calc(16px + env(safe-area-inset-left, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
}

.ig-scene.immersive .ig-controls > *[b-7783bmhgz6] { pointer-events: auto; }

/* Stop the HUD column short so it clears the attack button in the bottom right. */
.ig-scene.immersive .ig-hud[b-7783bmhgz6] { bottom: auto; }
.ig-scene.immersive .ig-hp[b-7783bmhgz6] { flex: none; height: 80px; }

/* A phone held sideways: shorten both so the HUD column ends above the attack button. */
@media (max-height: 420px) {
    .ig-scene.immersive .ig-hp[b-7783bmhgz6] { height: 52px; min-height: 0; }
    .ig-scene.immersive .ig-attack[b-7783bmhgz6] { width: 80px; height: 80px; }
}
.ig-scene.immersive .ig-move[b-7783bmhgz6] { opacity: 0.9; }

.ig-scene.immersive .ig-option[b-7783bmhgz6] { display: none; }

/* ---- Phones: edge-to-edge stage ---- */
@media (max-width: 600px) {
    .ig-scene[b-7783bmhgz6] { padding: 0; }
    .ig-scene:not(.immersive) .ig-stage[b-7783bmhgz6] { border-radius: 0; box-shadow: none; }
    .ig-controls[b-7783bmhgz6] { gap: 1.5rem; }
    .ig-option[b-7783bmhgz6] { padding: 0 12px; }
}
/* /Components/Jihanki/JihankiStudioView.razor.rz.scp.css */
/* Picture left, controls right, the pair filling the viewport so everything is
   on screen at once. The stage is as large as the window's height allows. */
.js-page[b-x4sxm1dswn] {
    --js-ink: #2b2444;
    --js-pad: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    align-items: center;
    gap: var(--js-pad);
    height: 100vh;
    height: 100dvh;
    padding: var(--js-pad);
    box-sizing: border-box;
}
.js-picture[b-x4sxm1dswn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
}

/* ---- The stage (the screenshot) ---- */
.js-stage[b-x4sxm1dswn] {
    --r: 1;
    container-type: inline-size;
    position: relative;
    width: min(100%, calc((100dvh - 2 * var(--js-pad)) * var(--r)));
    aspect-ratio: var(--r);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4cqw;
    padding: 9cqw 7cqw 11cqw;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 6px;
    background-color: var(--bg);
    background-image: radial-gradient(var(--dot) 1.6px, transparent 1.7px);
    background-size: 18px 18px;
    font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
}
.js-portrait[b-x4sxm1dswn] { --r: 0.8; }
.js-story[b-x4sxm1dswn] { --r: 0.5625; }

.js-bg-day[b-x4sxm1dswn] { --bg: #fff3e3; --dot: rgba(255,150,120,0.22); --tag: #86799f; }
.js-bg-night[b-x4sxm1dswn] { --bg: #0c0f1f; --dot: rgba(120,150,255,0.16); --tag: #9c93c2; }
.js-bg-pink[b-x4sxm1dswn] { --bg: #ffd9e8; --dot: rgba(255,90,168,0.20); --tag: #b0507e; }
.js-bg-blue[b-x4sxm1dswn] { --bg: #d6f1ff; --dot: rgba(46,140,255,0.18); --tag: #4b78a8; }

/* ---- Speech bubble, its tail pointing down at the character ---- */
.js-bubble[b-x4sxm1dswn] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    min-width: 30cqw;
    padding: 4cqw 6cqw;
    box-sizing: border-box;
    background: #fff;
    border: 1cqw solid var(--js-ink);
    border-radius: 7cqw;
    box-shadow: 0 1.6cqw 0 rgba(43,36,68,0.18);
    color: var(--js-ink);
    text-align: center;
}
.js-bubble[b-x4sxm1dswn]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3.2cqw;
    width: 5cqw;
    height: 5cqw;
    background: #fff;
    border-right: 1cqw solid var(--js-ink);
    border-bottom: 1cqw solid var(--js-ink);
    transform: translateX(-50%) rotate(45deg);
}
.js-bubble p[b-x4sxm1dswn] {
    margin: 0;
    font-size: calc(var(--js-text) * 1cqw);
    font-weight: 900;
    line-height: 1.2;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.js-face[b-x4sxm1dswn] {
    flex: none;
    width: 46cqw;
    aspect-ratio: 1;
    filter: drop-shadow(0 1.6cqw 0 rgba(43,36,68,0.14));
}
.js-face[b-x4sxm1dswn]  svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Empty: a big blank bubble to drop a screenshot into later. */
.js-empty[b-x4sxm1dswn] { gap: 4cqw; }
.js-empty .js-bubble[b-x4sxm1dswn] {
    flex: 1;
    width: 100%;
    border-radius: 6cqw;
}
.js-empty .js-face[b-x4sxm1dswn] { width: 30cqw; }

.js-tag[b-x4sxm1dswn] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.5cqw;
    text-align: center;
    font-size: 3cqw;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--tag);
}
.js-tag span[b-x4sxm1dswn] { color: #ff6faa; letter-spacing: 0; }

/* ---- Controls ---- */
.js-controls[b-x4sxm1dswn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 100%;
    overflow-y: auto;
    padding-right: 4px;
}
.js-field[b-x4sxm1dswn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.js-field > span[b-x4sxm1dswn] {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}
.js-row[b-x4sxm1dswn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}
.js-controls select[b-x4sxm1dswn],
.js-controls textarea[b-x4sxm1dswn] {
    font: inherit;
    font-size: 16px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 2px solid rgba(128,128,128,0.35);
    background: transparent;
    color: inherit;
}
.js-controls select option[b-x4sxm1dswn],
.js-controls select optgroup[b-x4sxm1dswn] { color: #2b2444; background: #fff; }
.js-controls textarea[b-x4sxm1dswn] { resize: vertical; }
.js-controls textarea:disabled[b-x4sxm1dswn] { opacity: 0.45; }

.js-seg[b-x4sxm1dswn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.js-seg button[b-x4sxm1dswn] {
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    border: 2px solid rgba(128,128,128,0.35);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.js-seg button.on[b-x4sxm1dswn] {
    background: #ff6faa;
    border-color: #ff6faa;
    color: #fff;
}
.js-range output[b-x4sxm1dswn] {
    min-width: 3.5em;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}
.js-check[b-x4sxm1dswn],
.js-range[b-x4sxm1dswn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    cursor: pointer;
}

/* Too narrow for two columns: stack, picture first, and let the page scroll. */
@media (max-width: 800px) {
    .js-page[b-x4sxm1dswn] {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
        --js-pad: 16px;
    }
    .js-stage[b-x4sxm1dswn] { width: min(100%, calc(82vh * var(--r))); }
    .js-controls[b-x4sxm1dswn] { max-height: none; overflow: visible; }
}
/* /Components/Overworld/OverworldMap.razor.rz.scp.css */
.ow-scene[b-sszoipzonw] {
    /* the rail-ads layout sizes the centre column from its CONTENT width, so
       percentage widths are circular here — use a viewport unit to hold the
       scene open instead. min(100vw, 600px) matches the puzzle column
       (.puzzle-container max-width) at every viewport size instead of just
       above ~750px (where 80vw happens to clear the 600px cap). */
    width: 100vw;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 20px;
}

.ow-hint[b-sszoipzonw] {
    margin: 0;
    font-family: var(--rpg-font-pixel);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rpg-ink-dim);
}

.ow-board[b-sszoipzonw] {
    /* position: relative anchors the floating MusicToggle button */
    position: relative;
    width: 100%;
    border-radius: var(--rpg-radius);
    overflow: hidden;
    background: var(--rpg-board-green);
    border: 3px solid var(--rpg-border);
    box-shadow: var(--rpg-shadow);
}

.ow-svg[b-sszoipzonw] {
    display: block;
    width: 100%;
    height: min(74vh, 640px);
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.ow-svg:active[b-sszoipzonw] {
    cursor: grabbing;
}

[b-sszoipzonw] .ow-clickable {
    cursor: pointer;
}

[b-sszoipzonw] .ow-symbol-inner {
    transition: transform 0.15s ease;
}

[b-sszoipzonw] .ow-clickable:hover .ow-symbol-inner {
    transform: scale(1.15);
}

[b-sszoipzonw] .ow-shadow {
    filter: drop-shadow(0 1.5px 1px rgba(30, 34, 18, 0.35));
}
/* /Components/Pathmaker/PathmakerGame.razor.rz.scp.css */
/* Pathmaker — rebuild the war-torn village ---------------------------------- */

.pm-scene[b-fqk6m8aiav] {
    /* repoint local tokens at the shared parchment RPG theme (rpg-theme.css) */
    --pm-gold: var(--rpg-gold);
    --pm-gold-bright: var(--rpg-gold-bright);
    --pm-ink: var(--rpg-ink);
    --pm-ink-dim: var(--rpg-ink-dim);

    /* the rail-ads layout sizes the centre column from its CONTENT width, so
       percentage widths are circular here — use viewport units to hold the
       scene open. 600px matches the puzzle column (.puzzle-container max-width). */
    width: 80vw;
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 1.1rem 1rem 1.25rem;
    text-align: center;
    border-radius: 18px;
    background:
        radial-gradient(120% 90% at 50% 0%, #fbf5e6 0%, var(--rpg-parchment) 55%, var(--rpg-parchment-dim) 100%);
    border: 1px solid var(--rpg-border);
    box-shadow: var(--rpg-shadow), var(--rpg-shadow-inset);
    user-select: none;
    -webkit-user-select: none;
}

/* ---- Hint ------------------------------------------------------------------ */
.pm-hint[b-fqk6m8aiav] {
    font-family: var(--rpg-font-pixel);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pm-ink-dim);
    margin: 0.2rem 0 0.85rem;
}

/* ---- Progress chip ----------------------------------------------------------- */
.pm-quests[b-fqk6m8aiav] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.pm-quest[b-fqk6m8aiav] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--pm-ink-dim);
    background: var(--rpg-parchment-dim);
    border: 1px solid var(--rpg-border);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.pm-quest .pm-q-ico[b-fqk6m8aiav] { font-size: 0.85rem; filter: grayscale(0.7) brightness(0.9); transition: filter 0.25s ease; }

.pm-quest.done[b-fqk6m8aiav] {
    color: var(--rpg-wood);
    border-color: var(--rpg-gold);
    background: rgba(232, 193, 90, 0.28);
    box-shadow: 0 0 12px rgba(201, 154, 58, 0.28);
}

.pm-quest.done .pm-q-ico[b-fqk6m8aiav] { filter: none; }

.pm-quest.done .pm-q-label[b-fqk6m8aiav]::after {
    content: " \2713";
    color: var(--pm-gold-bright);
}

/* ---- Board ---------------------------------------------------------------- */
.pm-board[b-fqk6m8aiav] {
    position: relative;
    border-radius: 14px;
    background:
        radial-gradient(130% 110% at 50% 0%, #d8e7bd 0%, var(--rpg-board-green) 55%, #bcd39a 100%);
    box-shadow: 0 8px 22px rgba(40, 50, 25, 0.22);
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

.pm-svg[b-fqk6m8aiav] {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* ---- Connector layers -------------------------------------------------------- */
.pk-rot[b-fqk6m8aiav] {
    transform-origin: 0 0;
    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.pk-shadow[b-fqk6m8aiav] { filter: drop-shadow(0 1.4px 1.1px rgba(30, 26, 18, 0.45)); }

/* worn grass tracks: a soft trampled halo blending into the meadow with a
   sandy trodden line down the middle; dull until they join the main network */
.pk-road-edge[b-fqk6m8aiav],
.pk-road-edge-hub[b-fqk6m8aiav] { transition: stroke 0.3s ease, fill 0.3s ease, opacity 0.3s ease; }

.pk-road-edge[b-fqk6m8aiav] { stroke: #868e69; stroke-width: 11.5; stroke-linecap: round; opacity: 0.55; }
.pk-road-edge-hub[b-fqk6m8aiav] { fill: #868e69; opacity: 0.55; }
.pk-road-edge.on[b-fqk6m8aiav] { stroke: #a9a566; opacity: 0.7; }
.pk-road-edge-hub.on[b-fqk6m8aiav] { fill: #a9a566; opacity: 0.7; }

.pk-road-fill[b-fqk6m8aiav],
.pk-road-fill-hub[b-fqk6m8aiav] { transition: stroke 0.3s ease, fill 0.3s ease; }

.pk-road-fill[b-fqk6m8aiav] { stroke: #aaa18b; stroke-width: 5.6; stroke-linecap: round; }
.pk-road-fill-hub[b-fqk6m8aiav] { fill: #aaa18b; }
.pk-road-fill.on[b-fqk6m8aiav] { stroke: #c6a26b; }
.pk-road-fill-hub.on[b-fqk6m8aiav] { fill: #c6a26b; }

/* bridges: lane arms crossing the river ride a timber deck — dark under-beam,
   wood edging and plank surface with seam lines; planks warm up when lit */
.pk-bridge-deck[b-fqk6m8aiav] { stroke: #4a3319; stroke-width: 14.5; stroke-linecap: round; }

.pk-road-edge.bridge[b-fqk6m8aiav] { stroke: #6b4a26; opacity: 0.95; }
.pk-road-edge.bridge.on[b-fqk6m8aiav] { stroke: #7d572c; opacity: 1; }
.pk-road-edge-hub.bridge[b-fqk6m8aiav] { fill: #6b4a26; opacity: 0.95; }
.pk-road-edge-hub.bridge.on[b-fqk6m8aiav] { fill: #7d572c; opacity: 1; }

.pk-road-fill.bridge[b-fqk6m8aiav] { stroke: #a97e4a; }
.pk-road-fill.bridge.on[b-fqk6m8aiav] { stroke: #c99b58; }
.pk-road-fill-hub.bridge[b-fqk6m8aiav] { fill: #a97e4a; }
.pk-road-fill-hub.bridge.on[b-fqk6m8aiav] { fill: #c99b58; }

.pk-bridge-plank[b-fqk6m8aiav] { stroke: #6e4a26; stroke-width: 1.2; opacity: 0.75; }

/* scattered dirt flecks along the trodden line */
.pk-road-fleck[b-fqk6m8aiav] { fill: #7d7565; opacity: 0.5; transition: fill 0.3s ease, opacity 0.3s ease; }
.pk-road-fleck.on[b-fqk6m8aiav] { fill: #8f6f45; opacity: 0.75; }

/* a dead-end lane can open into a small village square: same trodden surface
   as the path (halo ring + trodden centre), so it lights with its lane */
.pk-square-edge[b-fqk6m8aiav] { fill: #868e69; opacity: 0.55; transition: fill 0.3s ease, opacity 0.3s ease; }
.pk-square-edge.on[b-fqk6m8aiav] { fill: #a9a566; opacity: 0.7; }
.pk-square-fill[b-fqk6m8aiav] { fill: #aaa18b; transition: fill 0.3s ease; }
.pk-square-fill.on[b-fqk6m8aiav] { fill: #c6a26b; }

/* wooden stockade: warm timber posts (log ends, seen from above) on a wood
   ground line; posts glow golden once the building's stockade seals */
.pk-wall-base[b-fqk6m8aiav] { stroke: #7a5a34; stroke-width: 7; stroke-linecap: round; }

.pk-wall-log[b-fqk6m8aiav] {
    fill: #b8834a;
    stroke: #6e4a26;
    stroke-width: 1.2;
    transition: fill 0.3s ease;
}

.pk-wall-log.on[b-fqk6m8aiav] { fill: #d9a55e; }

/* the spur linking a bent-wall door back to the path hub */
.pk-door-stub-edge[b-fqk6m8aiav] { stroke: #868e69; stroke-width: 8; stroke-linecap: round; opacity: 0.55; transition: stroke 0.3s ease, opacity 0.3s ease; }
.pk-door-stub-edge.on[b-fqk6m8aiav] { stroke: #a9a566; opacity: 0.7; }

.pk-door-stub-fill[b-fqk6m8aiav] { stroke: #aaa18b; stroke-width: 4.8; stroke-linecap: round; transition: stroke 0.3s ease; }
.pk-door-stub-fill.on[b-fqk6m8aiav] { stroke: #c6a26b; }

/* doors glow faintly once their building is restored */
.pk-door[b-fqk6m8aiav] {
    fill: #6d4526;
    stroke: #3d2513;
    stroke-width: 1.6;
    transition: fill 0.3s ease;
}

.pk-door.on[b-fqk6m8aiav] {
    fill: #8a5a2e;
    filter: drop-shadow(0 0 4px rgba(255, 205, 130, 0.7));
}

/* a repaired roof pops into place; its coin lands just after */
.pk-roof-pop[b-fqk6m8aiav] { animation: pk-pop-b-fqk6m8aiav 0.4s cubic-bezier(0.34, 1.5, 0.5, 1); }

.pk-coin[b-fqk6m8aiav] { animation: pk-pop-b-fqk6m8aiav 0.35s cubic-bezier(0.34, 1.5, 0.5, 1) 0.3s backwards; }

@keyframes pk-pop-b-fqk6m8aiav {
    0% { opacity: 0; transform: scale(0.85); transform-origin: center; transform-box: fill-box; }
    100% { opacity: 1; transform: scale(1); transform-origin: center; transform-box: fill-box; }
}

/* ---- Ruins theme (modern abandoned city) -------------------------------------
   Same board, same classes — the .ruins scene class reskins the connector
   layers: asphalt roads, concrete plaza, steel doors and a canal bridge. The
   pk-ruin-* classes are only rendered in ruins mode. */
.pm-scene.ruins .pm-board[b-fqk6m8aiav] {
    background: radial-gradient(130% 110% at 50% 0%, #a7aaa1 0%, #8d9087 55%, #7e8178 100%);
}

/* broken roads: pale rubble-strewn asphalt until connected, then a dark
   repaired surface whose flecks become faded yellow lane markings */
.ruins .pk-road-edge[b-fqk6m8aiav] { stroke: #7b7b74; opacity: 0.55; }
.ruins .pk-road-edge-hub[b-fqk6m8aiav] { fill: #7b7b74; opacity: 0.55; }
.ruins .pk-road-edge.on[b-fqk6m8aiav] { stroke: #55554f; opacity: 0.85; }
.ruins .pk-road-edge-hub.on[b-fqk6m8aiav] { fill: #55554f; opacity: 0.85; }

.ruins .pk-road-fill[b-fqk6m8aiav] { stroke: #8f8e86; }
.ruins .pk-road-fill-hub[b-fqk6m8aiav] { fill: #8f8e86; }
.ruins .pk-road-fill.on[b-fqk6m8aiav] { stroke: #62625c; }
.ruins .pk-road-fill-hub.on[b-fqk6m8aiav] { fill: #62625c; }

.ruins .pk-road-fleck[b-fqk6m8aiav] { fill: #a09e94; }
.ruins .pk-road-fleck.on[b-fqk6m8aiav] { fill: #e0c24a; opacity: 0.9; }

/* road arms end flush at the tile edge — round caps would bulge past the
   shared edge onto a neighbouring building slab (the hub circles still cover
   the arm ends at the tile centre) */
.ruins .pk-road-edge[b-fqk6m8aiav],
.ruins .pk-road-fill[b-fqk6m8aiav] { stroke-linecap: butt; }

/* dead-end plaza: a cracked concrete forecourt instead of a village square */
.ruins .pk-square-edge[b-fqk6m8aiav] { fill: #7b7b74; }
.ruins .pk-square-edge.on[b-fqk6m8aiav] { fill: #55554f; }
.ruins .pk-square-fill[b-fqk6m8aiav] { fill: #8f8e86; }
.ruins .pk-square-fill.on[b-fqk6m8aiav] { fill: #62625c; }

.ruins .pk-door-stub-edge[b-fqk6m8aiav] { stroke: #7b7b74; }
.ruins .pk-door-stub-edge.on[b-fqk6m8aiav] { stroke: #55554f; }
.ruins .pk-door-stub-fill[b-fqk6m8aiav] { stroke: #8f8e86; }
.ruins .pk-door-stub-fill.on[b-fqk6m8aiav] { stroke: #62625c; }

/* the canal bridge is concrete and steel; planks read as expansion joints */
.ruins .pk-bridge-deck[b-fqk6m8aiav] { stroke: #383d41; }
.ruins .pk-road-edge.bridge[b-fqk6m8aiav] { stroke: #6f757b; }
.ruins .pk-road-edge.bridge.on[b-fqk6m8aiav] { stroke: #7c838a; }
.ruins .pk-road-edge-hub.bridge[b-fqk6m8aiav] { fill: #6f757b; }
.ruins .pk-road-edge-hub.bridge.on[b-fqk6m8aiav] { fill: #7c838a; }
.ruins .pk-road-fill.bridge[b-fqk6m8aiav] { stroke: #979da3; }
.ruins .pk-road-fill.bridge.on[b-fqk6m8aiav] { stroke: #a9b0b7; }
.ruins .pk-road-fill-hub.bridge[b-fqk6m8aiav] { fill: #979da3; }
.ruins .pk-road-fill-hub.bridge.on[b-fqk6m8aiav] { fill: #a9b0b7; }
.ruins .pk-bridge-plank[b-fqk6m8aiav] { stroke: #4d5358; }

/* building fragments: the slice of floor plate each wall tile carries; the
   whole slab cleans up once its building's wall loop seals */
.pk-ruin-frag[b-fqk6m8aiav] {
    fill: #8f8c83;
    stroke: #6f6d64;
    stroke-width: 1.4;
    stroke-linejoin: round;
    opacity: 0.97;
    transition: fill 0.3s ease;
}

.pk-ruin-frag.on[b-fqk6m8aiav] { fill: #a6a399; }

.pk-ruin-rubble[b-fqk6m8aiav] { fill: #75736a; opacity: 0.8; }

/* the standing wall face along the chord: concrete footing under a broken
   course of masonry chunks; both lighten when the building seals */
.pk-ruin-face[b-fqk6m8aiav] { stroke: #7d7a70; stroke-width: 7; stroke-linecap: round; transition: stroke 0.3s ease; }
.pk-ruin-face.on[b-fqk6m8aiav] { stroke: #97948a; }

.pk-ruin-block[b-fqk6m8aiav] {
    fill: #a19e94;
    stroke: #5c5a52;
    stroke-width: 1;
    transition: fill 0.3s ease;
}

.pk-ruin-block.on[b-fqk6m8aiav] { fill: #bdbab0; }

/* dark steel doors, warm interior light once the building is restored */
.ruins .pk-door[b-fqk6m8aiav] { fill: #43484c; stroke: #202427; }
.ruins .pk-door.on[b-fqk6m8aiav] { fill: #575d61; }

/* ---- Interaction layer --------------------------------------------------------- */
.pk-hit[b-fqk6m8aiav] {
    fill: rgba(0, 0, 0, 0);
    stroke: transparent;
    stroke-width: 2;
    cursor: pointer;
    transition: stroke 0.15s ease, fill 0.15s ease;
}

.pk-hit:hover[b-fqk6m8aiav] { stroke: rgba(255, 215, 106, 0.75); fill: rgba(255, 235, 170, 0.08); }

.pk-hit.inert[b-fqk6m8aiav] { cursor: default; }
.pk-hit.inert:hover[b-fqk6m8aiav] { stroke: transparent; fill: rgba(0, 0, 0, 0); }

/* ---- Toolbar ------------------------------------------------------------------------- */
.pm-toolbar[b-fqk6m8aiav] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.pm-btn[b-fqk6m8aiav] {
    font-family: var(--rpg-font-pixel);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.95rem;
    color: var(--rpg-wood);
    background: linear-gradient(#f6ebd0, var(--rpg-parchment-dim));
    border: 1px solid var(--rpg-border);
    border-radius: 9px;
    padding: 0.5rem 0.95rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(90, 74, 54, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.pm-btn:hover[b-fqk6m8aiav] {
    border-color: var(--rpg-gold);
    box-shadow: 0 2px 10px rgba(201, 154, 58, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    filter: brightness(1.04);
}

.pm-btn:active[b-fqk6m8aiav] { transform: translateY(2px); box-shadow: 0 0 3px rgba(90, 74, 54, 0.4); }

.pm-btn-gold[b-fqk6m8aiav] {
    color: #2c2109;
    background: linear-gradient(#ffe08a, var(--rpg-gold));
    border-color: var(--rpg-border);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.pm-ico[b-fqk6m8aiav] { font-size: 0.95rem; }

/* ---- Temporary tuning controls (prototype only) ------------------------------------------ */
.pm-devbar[b-fqk6m8aiav] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem 1.1rem;
    margin-top: 0.8rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    border: 1px dashed var(--rpg-border);
    background: rgba(90, 74, 54, 0.05);
}

.pm-dev-group[b-fqk6m8aiav] { display: inline-flex; align-items: center; gap: 0.3rem; }

.pm-dev-label[b-fqk6m8aiav] {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pm-ink-dim);
    margin-right: 0.15rem;
}

.pm-dev-btn[b-fqk6m8aiav] {
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--pm-ink-dim);
    background: rgba(90, 74, 54, 0.06);
    border: 1px solid var(--rpg-border);
    border-radius: 7px;
    padding: 0.28rem 0.55rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.pm-dev-btn:hover[b-fqk6m8aiav] { border-color: var(--rpg-gold); color: var(--pm-ink); }

.pm-dev-btn.sel[b-fqk6m8aiav] {
    color: #2c2109;
    background: linear-gradient(#ffe08a, var(--rpg-gold));
    border-color: var(--rpg-border);
}

.pm-dev-slider[b-fqk6m8aiav] { width: 110px; accent-color: var(--pm-gold-bright); }

.pm-dev-warn[b-fqk6m8aiav] { font-size: 0.7rem; color: #e08a7a; }

/* ---- Victory ---------------------------------------------------------------------------- */
.pm-board.is-solved[b-fqk6m8aiav] {
    box-shadow:
        0 0 34px rgba(201, 154, 58, 0.4),
        0 8px 22px rgba(40, 50, 25, 0.22);
}

.pm-victory[b-fqk6m8aiav] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 16, 8, 0.55);
    backdrop-filter: blur(3px);
    border-radius: 14px;
    animation: pm-fade-b-fqk6m8aiav 0.4s ease;
    z-index: 5;
}

.pm-victory-card[b-fqk6m8aiav] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.4rem 2.2rem 1.5rem;
    border-radius: 14px;
    background: linear-gradient(#fbf5e6, var(--rpg-parchment-dim));
    border: 1px solid var(--rpg-gold);
    box-shadow: 0 0 40px rgba(201, 154, 58, 0.28), 0 14px 30px rgba(40, 50, 25, 0.4);
    animation: pm-rise-b-fqk6m8aiav 0.45s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.pm-victory-close[b-fqk6m8aiav] {
    position: absolute;
    top: 0.4rem;
    right: 0.55rem;
    background: none;
    border: none;
    padding: 0.1rem 0.3rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--pm-ink-dim);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
}

.pm-victory-close:hover[b-fqk6m8aiav] { color: var(--pm-gold-bright); transform: scale(1.15); }

.pm-victory-rule[b-fqk6m8aiav] {
    width: 3.5rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--pm-gold-bright), transparent);
}

.pm-victory-title[b-fqk6m8aiav] {
    font-weight: 900;
    letter-spacing: 0.22em;
    color: var(--rpg-wood);
    font-size: 1.15rem;
    text-shadow: 0 0 14px rgba(201, 154, 58, 0.5);
}

/* one coin per footprint hex of the restored village */
.pm-victory-loot[b-fqk6m8aiav] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin: 0.25rem 0 0.55rem;
}

.pm-coin[b-fqk6m8aiav] {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #ffeaa8, #ffd76a 45%, #d8a92e 80%, #b8912e);
    border: 1.5px solid #8a6d1d;
    box-shadow:
        0 3px 0 -0.5px #a37c22,
        0 4px 6px rgba(0, 0, 0, 0.45),
        0 0 8px rgba(255, 215, 106, 0.55),
        inset 0 1.5px 2px rgba(255, 255, 255, 0.55),
        inset 0 -2px 3px rgba(138, 109, 29, 0.55);
    animation: pm-coin-pop-b-fqk6m8aiav 0.45s cubic-bezier(0.34, 1.5, 0.5, 1) backwards;
}

.pm-coin:nth-child(2)[b-fqk6m8aiav] { animation-delay: 0.08s; }
.pm-coin:nth-child(3)[b-fqk6m8aiav] { animation-delay: 0.16s; }
.pm-coin:nth-child(4)[b-fqk6m8aiav] { animation-delay: 0.24s; }
.pm-coin:nth-child(5)[b-fqk6m8aiav] { animation-delay: 0.32s; }
.pm-coin:nth-child(6)[b-fqk6m8aiav] { animation-delay: 0.4s; }

@keyframes pm-coin-pop-b-fqk6m8aiav {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pm-fade-b-fqk6m8aiav {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pm-rise-b-fqk6m8aiav {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Small screens ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* rails are hidden and the layout is a plain column here, so 100% works */
    .pm-scene[b-fqk6m8aiav] { width: 100%; }
}

@media (max-width: 480px) {
    .pm-scene[b-fqk6m8aiav] { padding: 0.8rem 0.55rem 1rem; border-radius: 12px; }
    .pm-quest[b-fqk6m8aiav] { font-size: 0.68rem; padding: 0.22rem 0.55rem; }
    .pm-victory-card[b-fqk6m8aiav] { padding: 1.1rem 1.4rem 1.2rem; }
}
/* /Components/Pipcross/PipcrossGame.razor.rz.scp.css */
/* ----- Board layout ----- */

.dg-board-wrap[b-v9lzfrj1lq] {
    display: flex;
    justify-content: center;
    padding: 0 6px;
    margin-top: 6px;
}

.dg-board[b-v9lzfrj1lq] {
    --cell: clamp(64px, 21vw, 100px);
    display: grid;
    grid-template-columns: auto repeat(3, var(--cell));
    grid-template-rows: auto repeat(3, var(--cell));
    gap: 5px;
    background: linear-gradient(160deg, #ffffff, #f3f5fb);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(40, 40, 90, 0.12);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.dg-board.size4[b-v9lzfrj1lq] {
    --cell: clamp(50px, 16vw, 84px);
    grid-template-columns: auto repeat(4, var(--cell));
    grid-template-rows: auto repeat(4, var(--cell));
}

.dg-corner[b-v9lzfrj1lq] {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 8px 4px 0;
    font-size: 1.1rem;
    opacity: 0.85;
}

/* ----- Clues ----- */

.dg-top-clue[b-v9lzfrj1lq] {
    display: flex;
    align-items: stretch;
}

.dg-clue-col[b-v9lzfrj1lq] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    padding-bottom: 5px;
    min-height: 4.4em;
}

.dg-left-clue[b-v9lzfrj1lq] {
    display: flex;
    flex-direction: column;
    min-width: 4em;
}

.dg-clue-row[b-v9lzfrj1lq] {
    flex: 1 1 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55ch;
    padding-right: 8px;
}

.dg-clue-col span[b-v9lzfrj1lq],
.dg-clue-row span[b-v9lzfrj1lq] {
    font-size: clamp(11px, 2.8vw, 15px);
    font-weight: 700;
    line-height: 1;
    color: #8a91a5;
    transition: color 0.2s;
}

.dg-clue-col.ok span[b-v9lzfrj1lq],
.dg-clue-row.ok span[b-v9lzfrj1lq] {
    color: #27ae60;
}

/* A satisfied (green) clue is clickable: it crosses off the rest of its pip
   line in the empty cells. Only "ok" clues respond, so only they show the
   affordance; the faint pill on hover hints the whole label is a hit target. */
.dg-clue-col.ok[b-v9lzfrj1lq],
.dg-clue-row.ok[b-v9lzfrj1lq] {
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.dg-clue-col.ok:hover[b-v9lzfrj1lq],
.dg-clue-row.ok:hover[b-v9lzfrj1lq] {
    background: rgba(39, 174, 96, 0.12);
}

.dg-clue-col.bad span[b-v9lzfrj1lq],
.dg-clue-row.bad span[b-v9lzfrj1lq] {
    color: #e74c3c;
}

/* ----- Grid cells ----- */

.dg-cell[b-v9lzfrj1lq] {
    position: relative;
    display: flex;
    background: #eef1f7;
    border-radius: 14px;
    box-shadow: inset 0 2px 5px rgba(50, 60, 90, 0.08);
    cursor: pointer;
    transition: background 0.15s;
}

/* 3x3 guide lines showing the nine pip positions inside each empty slot,
   aligned with the three clue sub-columns/sub-rows */
.dg-cell.empty[b-v9lzfrj1lq] {
    background-image:
        linear-gradient(to right, rgba(130, 145, 180, 0.28) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(130, 145, 180, 0.28) 1px, transparent 1px);
    background-size: calc(100% / 3) calc(100% / 3);
    background-position: -1px -1px;
}

.dg-cell.targetable.empty[b-v9lzfrj1lq]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 2px dashed #ff9ecb;
    border-radius: 10px;
    pointer-events: none;
}

.dg-cell.targetable.empty:hover[b-v9lzfrj1lq] {
    background: #ffeaf4;
}

/* ----- Dice ----- */

/* The die fills its cell exactly and the pip grid has no padding, so each
   pip sits centred in one ninth of the cell - lining up with the guide
   lines on empty slots and the clue sub-columns/sub-rows */
.dg-die[b-v9lzfrj1lq] {
    position: relative;
    flex: 1;
    display: flex;
    margin: 0;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff, #edeff8);
    box-shadow: 0 3px 8px rgba(30, 30, 70, 0.18), inset 0 -2px 4px rgba(30, 30, 70, 0.06);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, outline-color 0.15s;
}

/* ----- Spin rotate control ----- */

/* Small circular button centred on a rotatable die (faces 2/3/6) in Spin mode.
   Turns the die 90° in place; sits above the pips with a faint backing so it
   stays legible even over a centre pip. */
.dg-rotate[b-v9lzfrj1lq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42%;
    aspect-ratio: 1;
    max-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: #6a4ad8;
    font-size: clamp(11px, 3.2vw, 16px);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(30, 30, 70, 0.28);
    z-index: 2;
    transition: background 0.15s, transform 0.15s;
}

.dg-rotate:hover[b-v9lzfrj1lq] {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.12) rotate(35deg);
}

/* Face 3 carries a centre pip, so its rotate control shifts into the empty top
   corner (which corner depends on orientation). Only the anchor point moves -
   the translate(-50%,-50%) centring and hover transform are inherited. */
.dg-rotate.corner-tr[b-v9lzfrj1lq],
.dg-rotate.corner-tl[b-v9lzfrj1lq] {
    width: 34%;
    max-width: 24px;
    top: 19%;
}

.dg-rotate.corner-tr[b-v9lzfrj1lq] {
    left: 79%;
}

.dg-rotate.corner-tl[b-v9lzfrj1lq] {
    left: 21%;
}

.dg-die:active[b-v9lzfrj1lq] {
    transform: scale(0.96);
}

.dg-pips[b-v9lzfrj1lq] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 0;
}

.pip[b-v9lzfrj1lq] {
    width: 56%;
    aspect-ratio: 1;
    align-self: center;
    justify-self: center;
    border-radius: 50%;
    background: transparent;
}

.pip.on[b-v9lzfrj1lq] {
    background: radial-gradient(circle at 32% 30%, #4a5170, #20243a);
    box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.25);
}

/* ----- Tray ----- */

/* The dice pool lives inside the puzzle box as a full-width row beneath the
   grid (spanning the row-label column plus the puzzle grid), separated by a
   faint divider rather than its own outlined panel. width:0 keeps it from
   contributing to track sizing (so the auto-sized clue column can't be
   stretched and pushed out of alignment), while min-width:100% then expands it
   to fill the whole board width once the tracks are resolved. */
.dg-tray[b-v9lzfrj1lq] {
    grid-column: 1 / -1;
    width: 0;
    min-width: 100%;
    margin-top: 7px;
    padding-top: 12px;
    min-height: 70px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 8px;
    border-top: 1px solid rgba(130, 145, 180, 0.28);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.dg-die.tray[b-v9lzfrj1lq] {
    flex: none;
    width: clamp(46px, 13vw, 60px);
    aspect-ratio: 1;
    margin: 0;
    border-radius: 18%;
}

.dg-die.tray:hover[b-v9lzfrj1lq] {
    transform: translateY(-2px);
}

.dg-die.tray.selected[b-v9lzfrj1lq] {
    outline: 3px solid #FFC0CB;
    box-shadow: 0 6px 14px rgba(255, 192, 203, 0.5);
    transform: translateY(-3px) scale(1.06);
}

.dg-tray-hint[b-v9lzfrj1lq] {
    color: #8a91a5;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 8px;
}

/* ----- Buttons ----- */

.dg-actions[b-v9lzfrj1lq] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.dg-actions .button[b-v9lzfrj1lq] {
    font-weight: 600;
    border-radius: 12px;
}

/* ----- Hint ----- */

.dg-hint-msg[b-v9lzfrj1lq] {
    margin: 12px auto 0;
    max-width: 560px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #f0ebff;
    color: #4a3d8f;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    animation: dg-pop-b-v9lzfrj1lq 0.3s ease;
}

.dg-cell.hint[b-v9lzfrj1lq] {
    box-shadow: inset 0 2px 5px rgba(50, 60, 90, 0.08), 0 0 0 3px #9b7bff;
}

.dg-cell.hint .dg-die[b-v9lzfrj1lq] {
    animation: dg-pop-b-v9lzfrj1lq 0.4s ease;
}

/* ----- Win state: Mexican-wave dice jump ----- */

/* Each die jumps once, staggered by its column (--wave) so the bump
   travels left-to-right across the board a single time. */
.dg-board.won .dg-die[b-v9lzfrj1lq] {
    animation: dg-jump-b-v9lzfrj1lq 0.45s ease-in-out 1;
    animation-delay: calc(var(--wave, 0) * 0.12s);
}

@keyframes dg-jump-b-v9lzfrj1lq {
    0%, 100% {
        transform: translateY(0);
    }

    45% {
        transform: translateY(-30%);
    }
}

/* ----- Pip-level note marking (player assist - does not affect solving) ----- */

/* A 3x3 grid of clickable pip positions overlaying an empty cell, aligned with
   the guide lines so a mark sits exactly where a real pip would render. */
.dg-note-grid[b-v9lzfrj1lq] {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    z-index: 1;
}

/* While a die is selected the notes stay visible but become display-only so a
   tap on the cell places the die instead of cycling a pip mark */
.dg-note-grid.readonly[b-v9lzfrj1lq] {
    pointer-events: none;
}

.dg-note[b-v9lzfrj1lq] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* "maybe": a faint grey pip where one might go */
.dg-note.maybe[b-v9lzfrj1lq]::before {
    content: "";
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #b7bccb;
}

/* "no": a small cross marking a pip position that can't be filled */
.dg-note.no[b-v9lzfrj1lq]::before {
    content: "\2715"; /* ✕ */
    font-size: clamp(11px, 3.4vw, 18px);
    font-weight: 700;
    line-height: 1;
    color: #9aa0b2;
}

@keyframes dg-pop-b-v9lzfrj1lq {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ----- Loading ----- */

.dg-loading[b-v9lzfrj1lq] {
    text-align: center;
    padding: 60px 0;
    color: #8a91a5;
    font-weight: 600;
}

.dg-loading-die[b-v9lzfrj1lq] {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    animation: dg-roll-b-v9lzfrj1lq 1.1s ease-in-out infinite;
}

@keyframes dg-roll-b-v9lzfrj1lq {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg) translateY(-4px);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ----- Mobile tweaks ----- */

@media (max-width: 480px) {
    .dg-board[b-v9lzfrj1lq] {
        gap: 3px;
        padding: 8px;
        border-radius: 14px;
    }

    .dg-cell[b-v9lzfrj1lq] {
        border-radius: 10px;
    }

    .dg-die[b-v9lzfrj1lq] {
        border-radius: 10px;
    }

    .dg-cell.targetable.empty[b-v9lzfrj1lq]::after {
        inset: 2px;
        border-radius: 7px;
    }

    .dg-left-clue[b-v9lzfrj1lq] {
        min-width: 3.2em;
    }

    .dg-clue-row[b-v9lzfrj1lq] {
        padding-right: 5px;
        gap: 0.4ch;
    }

    .dg-clue-col[b-v9lzfrj1lq] {
        min-height: 3.6em;
    }

    /* Pool-dice sizing tweaks, mobile only. Classic/Mini pool dice are 10%
       smaller than the default; Spin pool dice are 10% larger to make them
       easier to grab, with the rotate button shrunk 10% so it doesn't dominate
       the bigger die. Board dice are unaffected. */
    .dg-board:not(.spin) .dg-die.tray[b-v9lzfrj1lq] {
        width: clamp(41px, 11.7vw, 54px);
    }

    .dg-board.spin .dg-die.tray[b-v9lzfrj1lq] {
        width: clamp(51px, 14.3vw, 66px);
    }

    .dg-board.spin .dg-die.tray .dg-rotate[b-v9lzfrj1lq] {
        width: 37.8%;
        max-width: 27px;
    }

    .dg-board.spin .dg-die.tray .dg-rotate.corner-tr[b-v9lzfrj1lq],
    .dg-board.spin .dg-die.tray .dg-rotate.corner-tl[b-v9lzfrj1lq] {
        width: 30.6%;
        max-width: 21.6px;
    }
}
/* /Components/QuickFlip/QuickflipPuzzle.razor.rz.scp.css */
.tile-button[b-oac2w0gmco] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    font-size: 1.25rem;
    font-weight: bold;
    transition: transform 0.5s;
    backface-visibility: hidden;
    cursor: pointer;
    background-color: #f5f5f5;
    box-shadow: 2px 2px;
}

    .tile-button.back[b-oac2w0gmco] {
        transform: rotateY(180deg);
    }

    .tile-button:hover[b-oac2w0gmco] {
        transform: scale(1.05);
    }

    .tile-button.back:hover[b-oac2w0gmco] {
        transform: rotateY(180deg) scale(1.05);
    }

[b-oac2w0gmco] .switch[type=checkbox].is-small:checked + label:before {
    background-color: pink !important;
}
/* /Components/Shared/HeaderMenu.razor.rz.scp.css */
/* The header bar runs edge to edge at every width. The logo and menu sit at the
   page edges; the puzzle column below keeps its own 600px cap. */
.puzzle-menu[b-acyenwctwn] {
    max-width: none;
    width: 100%;
    background-color: pink;
    height: 60px;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.puzzle-menu.logged-in-header[b-acyenwctwn] {
    background-color: gold;
}

.ad-header[b-acyenwctwn] {
    max-width: 600px;
    text-align: center;
    display: none;
}

@media screen and (max-width: 768px) {
    .ad-header[b-acyenwctwn] {
        display: block;
    }
}

    .puzzle-menu div[b-acyenwctwn] {
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

.header-icon[b-acyenwctwn], .modal-icon[b-acyenwctwn] {
    color: #ffffe0;
    cursor: pointer;
    margin-left: -8px;
    margin-right: 2px;
    margin-top: 10px;
}

.gold[b-acyenwctwn] {
    color: gold;
}

    .modal-icon[b-acyenwctwn] {
        color: pink;
    }

    .fa-stack-1x[b-acyenwctwn] {
        color: black;
    }

.columns[b-acyenwctwn] {
    overflow: visible;
    margin-bottom: 0px !important;
}

.column[b-acyenwctwn] {
    padding-left: 5px;
    padding-right: 5px;
    overflow: visible;
}

.puzzle-title[b-acyenwctwn] {
    line-height: 90%;
}

@media (max-width: 768px) {
    .bells-title[b-acyenwctwn] {
        font-size: 1rem !important;
    }
    .bells-subtitle[b-acyenwctwn] {
        font-size: 0.75rem !important;
    }
}

.home-title[b-acyenwctwn] {
    padding-top: 10px;
}

.mallow[b-acyenwctwn] {
    width: 35px;
    height: 35px;
    margin-top: 12px;
    margin-left: 10px;
}

[b-acyenwctwn] .dropdown button {
    background-color: pink;
    height:50px;
    width: 40px;
}

    [b-acyenwctwn] .dropdown button:hover {
        background-color: pink;
        -webkit-box-shadow: none !important;
    }

    [b-acyenwctwn] .dropdown button:active {
        background-color: pink;
        -webkit-box-shadow: none !important;
    }

    [b-acyenwctwn] button > span.icon.is-small {
        display: none;
    }

[b-acyenwctwn] .dropdown-content {
    background-color: #ffffe0;
}

[b-acyenwctwn] .dropdown-menu {
    left: auto;
    right: 0;
}

/* CSS-only dropdown using checkbox */
.dropdown-checkbox[b-acyenwctwn] {
    display: none;
}

.dropdown-trigger-label[b-acyenwctwn] {
    cursor: pointer;
    display: inline-block;
    position: relative;
    z-index: 202;
}

.dropdown-backdrop[b-acyenwctwn] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 199;
    cursor: default;
}

.dropdown-checkbox:checked ~ .dropdown-backdrop[b-acyenwctwn] {
    display: block;
}

.dropdown-menu-container[b-acyenwctwn] {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 201;
    min-width: 12rem;
    padding-top: 4px;
}

.dropdown-checkbox:checked ~ .dropdown-menu-container[b-acyenwctwn] {
    display: block;
}

/* Close dropdown when clicking outside */
.dropdown-wrapper[b-acyenwctwn] {
    position: relative;
}

[b-acyenwctwn] .dropdown-item {
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
/* /Components/Shared/ModeSelector.razor.rz.scp.css */
.mode-selector[b-q9upjr7ygz] {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    border-radius: 24px;
    padding: 5px 7px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mode-selector.members[b-q9upjr7ygz] {
    background: gold;
}

.mode-selector-icon-link[b-q9upjr7ygz] {
    display: flex;
    align-items: center;
}

.mode-selector-icon[b-q9upjr7ygz] {
    width: 32px;
    height: 32px;
}

.mode-selector-pill[b-q9upjr7ygz] {
    background: white;
    border: none;
    border-radius: 16px;
    padding: 4px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.members .mode-selector-pill[b-q9upjr7ygz] {
    color: #3273dc;
    font-weight: normal;
}

a.mode-selector-pill[b-q9upjr7ygz] {
    text-decoration: none;
}

.mode-selector-pill.completed[b-q9upjr7ygz] {
    color: #a8a8a8;
    background: #ececec;
}

.members .mode-selector-pill.completed[b-q9upjr7ygz] {
    background: #f3e7a6;
    color: #9a8a3c;
}

.mode-selector-pill.selected[b-q9upjr7ygz],
.members .mode-selector-pill.selected[b-q9upjr7ygz] {
    background: #ff69b4;
    color: white;
    font-weight: 600;
}

.mode-selector-pill:hover:not(.selected)[b-q9upjr7ygz] {
    filter: brightness(0.95);
}
/* /Components/Shared/MusicToggle.razor.rz.scp.css */
/* Floats over the top-right corner of the nearest positioned ancestor
   (the page's game board). */
.music-btn[b-zcquovji23] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--rpg-border);
    background: rgba(250, 246, 232, 0.88);
    color: var(--rpg-ink-dim);
    cursor: pointer;
    box-shadow: 0 1.5px 3px rgba(30, 34, 18, 0.3);
}

.music-btn:hover[b-zcquovji23] {
    background: rgba(250, 246, 232, 1);
}

.music-btn.on[b-zcquovji23] {
    color: var(--rpg-ink, #2e3320);
}
/* /Components/Shared/PlayStatsCard.razor.rz.scp.css */
/* Puzzmallow pink and yellows: a white panel with a gold edge on the modal's pale yellow, gold-tinted
   streak tiles and pink bars. Numbers and labels stay in neutral inks so they read cleanly. */
.play-stats[b-4ockb5ytra] {
    --ps-ink: #222;
    --ps-ink-2: #666;
    --ps-pink: #ff69b4;
    --ps-gold: #ffd700;
    --ps-gold-edge: #f0c800;
    --ps-gold-pale: #fff6c2;
    --ps-track: #fff1b3;
    background: white;
    border: 2px solid var(--ps-gold);
    border-radius: 12px;
    padding: 12px 14px 14px;
    margin: 0.25rem 10px 0.75rem;
    color: var(--ps-ink);
    flex-shrink: 0;
}

.play-stats-title[b-4ockb5ytra] {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ps-pink);
    margin-bottom: 10px;
}

.play-stats-tiles[b-4ockb5ytra] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.play-stats-tile[b-4ockb5ytra] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px 8px;
    border-radius: 10px;
    background: var(--ps-gold-pale);
    min-height: 92px;
}

.play-stats-value[b-4ockb5ytra] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.play-stats-emoji[b-4ockb5ytra] {
    font-size: 1.1rem;
    margin-right: 6px;
    vertical-align: 0.35em;
}

.play-stats-label[b-4ockb5ytra] {
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Sits on the number's baseline: "2 days". */
.play-stats-unit[b-4ockb5ytra] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ps-ink-2);
    margin-left: 5px;
}

/* Win/lose games: played / won / win rate, a quieter row under the streak tiles */
.play-stats-record[b-4ockb5ytra] {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
}

.play-stats-record li[b-4ockb5ytra] {
    display: flex;
    flex-direction: column;
}

.play-stats-record-value[b-4ockb5ytra] {
    font-size: 1.1rem;
    font-weight: 800;
}

.play-stats-record-label[b-4ockb5ytra] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ps-ink-2);
}

.play-stats-modes-heading[b-4ockb5ytra] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 14px 0 6px;
    font-size: 0.85rem;
    font-weight: 700;
}

.play-stats-total[b-4ockb5ytra] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ps-ink-2);
}

.play-stats-modes[b-4ockb5ytra] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.play-stats-mode[b-4ockb5ytra] {
    display: grid;
    grid-template-columns: 4.5rem 1fr 2.5rem;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.play-stats-mode-label[b-4ockb5ytra] {
    font-weight: 600;
}

.play-stats-track[b-4ockb5ytra] {
    height: 10px;
    border-radius: 5px;
    background: var(--ps-track);
    overflow: hidden;
}

.play-stats-bar[b-4ockb5ytra] {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--ps-pink);
}

.play-stats-count[b-4ockb5ytra] {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Logged-out footer: the free-account prompt, separated from the numbers it's protecting. */
.play-stats-signup[b-4ockb5ytra] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--ps-gold-edge);
    text-align: center;
}

.play-stats-signup-lead[b-4ockb5ytra] {
    font-weight: 700;
    font-size: 0.9rem;
}

.play-stats-signup-body[b-4ockb5ytra] {
    font-size: 0.82rem;
    color: var(--ps-ink-2);
    margin: 2px 0 10px;
}

.play-stats-signup-button[b-4ockb5ytra] {
    background: var(--ps-pink);
    border-color: var(--ps-pink);
    color: white;
    font-weight: 700;
}

.play-stats-signup-button:hover[b-4ockb5ytra] {
    filter: brightness(0.95);
    color: white;
}

/* Loading placeholder: same footprint as the real card, so nothing jumps when it fills. */
.play-stats-skeleton[b-4ockb5ytra] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #fff1b3 25%, #fffbe3 50%, #fff1b3 75%);
    background-size: 200% 100%;
    animation: play-stats-shimmer-b-4ockb5ytra 1.2s linear infinite;
}

.play-stats-tile .play-stats-skeleton[b-4ockb5ytra] {
    width: 60%;
    height: 48px;
}

.play-stats-skeleton.bar[b-4ockb5ytra] {
    height: 14px;
    margin-top: 12px;
}

@keyframes play-stats-shimmer-b-4ockb5ytra {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .play-stats-skeleton[b-4ockb5ytra] {
        animation: none;
    }
}
/* /Components/Shared/PuzzleGrid.razor.rz.scp.css */
/* ---- Layout ----------------------------------------------------------------
   .pg is the size container for the whole block, so the column count follows
   the width of the column PuzzleGrid is placed in rather than the viewport's:
   Home widens its column on desktop (and squeezes it between the ad rails on
   small desktops), Subscribed keeps the 600px one.
   Its 10px side padding is what lines the banner and every grid up. */
.pg[b-ztubpd4i5g] {
    container-type: inline-size;
    padding: 12px 10px 0.5rem;
}

/* One card's width, worked out from the container rather than from whichever
   grid the card sits in. All three sections therefore share a card size, and
   the Word and More sections can sit side by side at exactly the columns of the
   grid above them. The 0.1px keeps rounding from wrapping a full row.
   Three-up by default; four and five once a card can stay at least ~168px wide,
   where the longest titles ("Bells & Whistles", "Terraformation") still clear
   the ellipsis at the size .pink-bottom .title gives them. 740px is also what a
   1440px window leaves between the rails once a Windows scrollbar is counted.
   (Container queries can't style the container itself, so these live on its
   children and inherit down.) */
.pg > *[b-ztubpd4i5g] {
    --pg-cols: 3;
    --pg-gap: 22px;
    --pg-card: calc((100cqi - (var(--pg-cols) - 1) * var(--pg-gap)) / var(--pg-cols) - 0.1px);
}

/* Halved gutters at phone widths (and between the rails on a small desktop),
   where three-up makes the cards small enough that 22px reads as a gap rather
   than a seam. */
@container (max-width: 739px) {
    .pg > *[b-ztubpd4i5g] {
        --pg-gap: 11px;
    }
}

@container (min-width: 740px) {
    .pg > *[b-ztubpd4i5g] {
        --pg-cols: 4;
    }
}

@container (min-width: 930px) {
    .pg > *[b-ztubpd4i5g] {
        --pg-cols: 5;
    }
}

/* Never leave a card alone on a row: at four-up, five cards would split 4 + 1,
   so the grid is capped at three cards wide (5 → 3 + 2) while the cards keep
   their four-up size. */
@container (min-width: 740px) and (max-width: 929px) {
    .puzzle-grid[b-ztubpd4i5g] {
        max-width: calc(3 * var(--pg-card) + 2 * var(--pg-gap) + 1px);
        margin-inline: auto;
    }
}

/* Sections are spaced apart by whitespace and a small label, not rules. */
.pg-section[b-ztubpd4i5g] {
    margin-top: 1.75rem;
}

.membership-banner + .pg-section[b-ztubpd4i5g] {
    margin-top: 1.25rem;
}

.pg-heading[b-ztubpd4i5g] {
    margin: 0 0 0.75rem;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b5960;
}

/* Flex-wrap with centring keeps a short last row centred at any column count. */
.puzzle-grid[b-ztubpd4i5g] {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pg-gap) !important;
}

/* Word and More: stacked (with the inline ad between them) until five cards fit
   a row, then side by side, each exactly as wide as its cards, so together they
   line up with the five-up grid above. The ad drops below the pair there. */
@container (min-width: 930px) {
    .pg-pair[b-ztubpd4i5g] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: var(--pg-gap);
    }

    .pg-word[b-ztubpd4i5g] {
        flex: 0 0 calc(3 * var(--pg-card) + 2 * var(--pg-gap));
    }

    .pg-more[b-ztubpd4i5g] {
        flex: 0 0 calc(2 * var(--pg-card) + var(--pg-gap));
    }

    .pg-ad[b-ztubpd4i5g] {
        order: 1;
        flex: 0 0 100%;
    }
}

/* Membership Banner */
.membership-banner[b-ztubpd4i5g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: gold;
    border: 1px solid #e6c200;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(60, 40, 0, 0.08), 0 8px 20px -12px rgba(60, 40, 0, 0.35);
    padding: 0.75rem 1rem;
    margin: 0;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 1rem;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.membership-banner:hover[b-ztubpd4i5g] {
    filter: brightness(1.08);
    transform: translateY(-1px);
    color: inherit;
}

.membership-banner-image[b-ztubpd4i5g] {
    height: 30px;
    width: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.membership-banner-text[b-ztubpd4i5g] {
    flex: 1;
    line-height: 1.3;
}

/* ---- Cards ------------------------------------------------------------------
   Rounded, soft-edged and lifted on hover. Spacing is all gap, no margins (the
   global .card margin from blazor-ui.css is zeroed). The border beats
   .white-border's black one: both are !important, this selector is more specific. */
.puzzle-grid > .card[b-ztubpd4i5g] {
    flex: 0 0 var(--pg-card);
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(40, 20, 30, 0.06), 0 8px 20px -12px rgba(40, 20, 30, 0.3);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
    .puzzle-grid > .card:hover[b-ztubpd4i5g] {
        transform: translateY(-3px);
        box-shadow: 0 2px 4px rgba(40, 20, 30, 0.08), 0 16px 28px -14px rgba(40, 20, 30, 0.4);
    }
}

.puzzle-card[b-ztubpd4i5g] {
    display: flex;
    flex-direction: column;
}

.puzzle-card-relative[b-ztubpd4i5g] {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.custom-content[b-ztubpd4i5g] {
    padding: 0 !important;
    margin: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.white-border[b-ztubpd4i5g] {
    background-color: white !important;
    border: 1px solid black !important;
}

.white-border .card-content[b-ztubpd4i5g] {
    margin: 0 !important;
    padding: 0 !important;
}

.themed-card[b-ztubpd4i5g] {
    background-color: #ffffe0 !important;
}

/* Card Links */
.card-link[b-ztubpd4i5g] {
    text-decoration: none;
    color: inherit;
}

/* Card Images */
.puzzle-card-image-wrapper[b-ztubpd4i5g] {
    text-align: center;
    margin-bottom: clamp(0.35rem, 1.6cqi, 0.75rem);
    padding-top: clamp(0.5rem, 2cqi, 1rem);
}

/* Square, sized off the card it sits in (about three-quarters of it on a phone);
   the 96px ceiling is the desktop size. */
.puzzle-image[b-ztubpd4i5g] {
    --pg-icon: clamp(52px, calc(var(--pg-card) * 0.72), 96px);
    height: var(--pg-icon);
    width: var(--pg-icon);
    margin: 0 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.puzzle-image img[b-ztubpd4i5g] {
    height: 100%;
    width: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* The Jihanki card's <img> is replaced at runtime by an inline <svg> whose eyes
   follow the pointer (jihanki-eyes.js). ::deep, not a plain descendant selector:
   an element this component did not render carries no CSS-isolation scope
   attribute for a scoped rule to match. Kept to this one figure so it cannot
   reach the Terraformation card's <AnimatedTerraformationHex /> next door. */
.puzzle-image.jihanki-face[b-ztubpd4i5g]  svg {
    height: 100%;
    width: 100%;
}

/* Pink Bottom — square-cornered; the card's own radius and overflow clip it. */
.pink-bottom[b-ztubpd4i5g] {
    background-color: pink !important;
    padding: 0.5rem;
    margin: 0 !important;
    border-top: none;
    border-radius: 0 !important;
}

/* Sized off the card: 0.75rem on a ~115px phone card (where the longest names,
   "Terraformation" and "Bells & Whistles", only just clear the ellipsis) up to
   1.15rem once the card is desktop-sized. */
.pink-bottom .title[b-ztubpd4i5g] {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(0.75rem, calc(var(--pg-card) * 0.1), 1.15rem);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Terraformation Card */
.tf-card[b-ztubpd4i5g] {
    position: relative;
}

.tf-hex-logo[b-ztubpd4i5g] {
    height: 100%;
    width: 100%;
    display: block;
    filter: drop-shadow(0 0 5px rgba(0, 204, 255, 0.5));
}

.rotating-hex[b-ztubpd4i5g] {
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.tf-scanlines[b-ztubpd4i5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
    z-index: 100;
    opacity: 0.5;
}

.tf-glow[b-ztubpd4i5g] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, transparent 10%, rgba(0, 204, 255, 0.03) 90%, transparent 100%);
    animation: tfCrtAnimation-b-ztubpd4i5g 100s linear infinite;
    background-size: 100% 80%;
    pointer-events: none;
    z-index: 99;
}

@keyframes tfCrtAnimation-b-ztubpd4i5g {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%;
    }
}

/* New Banner */
.new-banner[b-ztubpd4i5g] {
    position: absolute;
    top: 10px;
    left: -35px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
    color: white;
    padding: 5px 40px;
    transform: rotate(-45deg);
    font-weight: bold;
    font-size: 0.7rem;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 10;
    text-align: center;
}

.new-banner span[b-ztubpd4i5g] {
    display: block;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* /Components/Shared/SubscribeInput.razor.rz.scp.css */
.home-section-header[b-n3s8bgu0lq] {
    text-align: center;
    padding: 0 15px;
    margin-bottom: 15px;
}

.home-section-header p[b-n3s8bgu0lq] {
    font-size: 0.95rem;
    margin: 0;
}

.home-section-header p.section-title[b-n3s8bgu0lq] {
    font-weight: bold;
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.home-hr[b-n3s8bgu0lq] {
    margin-left: 10px;
    margin-right: 10px;
}
/* /Components/Shared/WinModal.razor.rz.scp.css */
/* Desktop: a floating card the same width as the old win box (80vw, max 500px), centred and
   scrollable if the window is too short for it. */
.win-modal[b-c4rmro4pgp] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 150;
    width: 80vw;
    max-width: 500px;
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    display: flex;
    animation: win-modal-fade-b-c4rmro4pgp 0.5s ease-in;
}

.win-modal-box[b-c4rmro4pgp] {
    position: relative;
    width: 100%;
    padding: 10px;
    margin: 0;
    border: 1px solid black !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: win-modal-slide-b-c4rmro4pgp 0.5s ease-out;
}

/* Header (message, Share, Close) and its divider: fixed at the top of the card. */
.win-modal-top[b-c4rmro4pgp] {
    flex-shrink: 0;
}

/* Everything under the header; scrolls on its own when the card is too short for it. */
.win-modal-body[b-c4rmro4pgp] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Mobile: full screen. */
@media (max-width: 768px) {
    .win-modal[b-c4rmro4pgp] {
        inset: 0;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
    }

    .win-modal-box[b-c4rmro4pgp] {
        border: none !important;
        border-radius: 0;
        box-shadow: none;
        padding-top: max(10px, env(safe-area-inset-top));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        animation: none;
    }
}

/* Inline: the same card in the page flow, the old inline card's margins. Two classes, so these
   beat the mobile full-screen rules above. */
.win-modal.win-modal-inline[b-c4rmro4pgp] {
    position: static;
    transform: none;
    z-index: auto;
    width: auto;
    max-width: none;
    max-height: none;
    height: auto;
    margin: 1rem 10px 0;
    animation: none;
}

.win-modal-inline .win-modal-box[b-c4rmro4pgp] {
    border: none !important;
    border-radius: 0.25rem;
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02);
    padding: 10px;
    overflow: visible;
    animation: none;
}

.win-modal-inline .win-modal-body[b-c4rmro4pgp] {
    overflow: visible;
}

.win-modal-header[b-c4rmro4pgp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 10px 0.5rem;
}

.win-modal-icon[b-c4rmro4pgp] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.win-modal-message[b-c4rmro4pgp] {
    flex: 1;
    text-align: center;
    font-size: 1rem;
}

@media (max-width: 480px) {
    .win-modal-message[b-c4rmro4pgp] {
        font-size: 0.85rem;
    }
}

.win-modal-header .button[b-c4rmro4pgp] {
    flex-shrink: 0;
}

.win-modal-divider[b-c4rmro4pgp] {
    border: none;
    border-top: 1px solid black;
    margin: 0.5rem 10px 0.75rem;
}

/* Splits the banner/ad gap evenly: 0.85rem above, 0.6rem + the ad's 0.25rem below. */
.win-modal-ad-divider[b-c4rmro4pgp] {
    margin: 0 10px 0.6rem;
}

/* Between the ad and the stats: the ad's 0.75rem above, 0.5rem + the stats card's 0.25rem below. */
.win-modal-stats-divider[b-c4rmro4pgp] {
    margin: 0 10px 0.5rem;
}

.win-modal-subtitle[b-c4rmro4pgp] {
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}

.win-modal-buttons[b-c4rmro4pgp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 10px 0.9rem;
}

.win-modal-modes[b-c4rmro4pgp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 10px 0.9rem;
}

/* Reserve the full unit height so nothing shifts when the creative lands. */
.win-modal-ad[b-c4rmro4pgp] {
    width: 300px;
    min-height: 250px;
    margin: 0.25rem auto 0.75rem;
    flex-shrink: 0;
}

/* A slim strip directly above the ad. */
.win-modal-join[b-c4rmro4pgp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: gold;
    border: 1px solid #e6b800;
    border-radius: 8px;
    margin: 0 10px 0.85rem;
    padding: 0.35rem 0.75rem;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.25;
    flex-shrink: 0;
}

.win-modal-join span[b-c4rmro4pgp] {
    text-decoration: underline;
}

.win-modal-join:hover[b-c4rmro4pgp] {
    filter: brightness(1.08);
    color: inherit;
}

.win-modal-join-icon[b-c4rmro4pgp] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Covers the modal for its first 0.8s, then hides itself (visibility: hidden takes it out of
   hit testing). */
.win-modal-tap-guard[b-c4rmro4pgp] {
    position: absolute;
    inset: 0;
    z-index: 1;
    animation: win-modal-guard-b-c4rmro4pgp 0.8s steps(1, end) forwards;
}

/* Mounted but not shown until its content has loaded (see WinModal). animation: none holds the
   open animations and the tap guard back, so they start from the moment it is revealed. */
.win-modal.win-modal-pending[b-c4rmro4pgp],
.win-modal-pending .win-modal-box[b-c4rmro4pgp],
.win-modal-pending .win-modal-tap-guard[b-c4rmro4pgp] {
    visibility: hidden;
    animation: none;
}

@keyframes win-modal-guard-b-c4rmro4pgp {
    from {
        visibility: visible;
    }

    to {
        visibility: hidden;
    }
}

@keyframes win-modal-fade-b-c4rmro4pgp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes win-modal-slide-b-c4rmro4pgp {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* /Components/TerraformationPuzzle/TerraformationPuzzle.razor.rz.scp.css */
/* Responsive font sizing for TERRAFORMATION title */
/* Use wrapper to target child HeaderMenu component */

/* Desktop and larger - use full size */
.terraformation-header-wrapper[b-051r8cpsst]  .puzzle-title.has-text-weight-bold {
    font-size: 1.5rem !important;
}

/* Tablet and below - scale down progressively */
@media screen and (max-width: 1023px) {
    .terraformation-header-wrapper[b-051r8cpsst]  .puzzle-title.has-text-weight-bold {
        font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
    }
}

/* Mobile devices - further scaling */
@media screen and (max-width: 768px) {
    .terraformation-header-wrapper[b-051r8cpsst]  .puzzle-title.has-text-weight-bold {
        font-size: clamp(0.95rem, 5vw, 1.3rem) !important;
    }
}

/* Small mobile devices - maintain readability */
@media screen and (max-width: 480px) {
    .terraformation-header-wrapper[b-051r8cpsst]  .puzzle-title.has-text-weight-bold {
        font-size: clamp(0.85rem, 5.5vw, 1.1rem) !important;
        letter-spacing: -0.02em; /* Slightly tighter spacing for better fit */
    }
}

/* Very small screens - ensure it fits */
@media screen and (max-width: 360px) {
    .terraformation-header-wrapper[b-051r8cpsst]  .puzzle-title.has-text-weight-bold {
        font-size: clamp(0.75rem, 6vw, 0.95rem) !important;
        letter-spacing: -0.03em;
    }
}

/* Success message styling */
.success-message[b-051r8cpsst] {
    border: 1px solid #0cf;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.1) 0%, rgba(10, 10, 10, 0.1) 100%);
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.5);
}

.success-message h3[b-051r8cpsst] {
    margin: 0;
    color: #0cf;
    text-shadow: 0 0 10px rgba(0, 204, 255, 0.8);
    font-family: 'Monda', sans-serif;
    font-size: 1.5rem;
    text-align: center;
}

/* Dark Mode Styles */
.terraformation-puzzle.dark-mode[b-051r8cpsst] {
    background: #0a0a0a !important;
}

/* Make entire page background black in dark mode */
[b-051r8cpsst] body:has(.terraformation-puzzle.dark-mode) {
    background-color: #000000 !important;
}

.puzzle-main:has(.terraformation-puzzle.dark-mode)[b-051r8cpsst] {
    background-color: #000000 !important;
}

/* Lighter background for hex grid - target the main grid SVG specifically */
.terraformation-puzzle.dark-mode[b-051r8cpsst]  .sci-fi-grid {
    background-color: #2a2a2a !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .sci-fi-btn {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
    color: #0cf !important;
    border-color: #0cf !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .sci-fi-btn:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%) !important;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.6) !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .sci-fi-btn.active {
    background: linear-gradient(135deg, #0cf 0%, #0099cc 100%) !important;
    color: #000 !important;
}

/* Remove black background from legend boxes */
.terraformation-puzzle.dark-mode[b-051r8cpsst]  .legend-container {
    background: transparent !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .legend-item {
    background: transparent !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .modal-box,
.terraformation-puzzle.dark-mode[b-051r8cpsst]  .puzzle-info {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
    border-color: #0cf !important;
    color: #e0e0e0 !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .row-label {
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: #0cf !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .success-message {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .modal-overlay {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .planet-button {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .planet-button:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%) !important;
}

.terraformation-puzzle.dark-mode[b-051r8cpsst]  .first-visit-modal {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
    color: #e0e0e0 !important;
}

/* Date Picker Controls */
.date-picker-controls[b-051r8cpsst] {
    display: flex;
    justify-content: center;
    padding: 15px;
    margin-bottom: 10px;
}

.date-picker-wrapper[b-051r8cpsst] {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.1) 0%, rgba(10, 10, 10, 0.1) 100%);
    border: 1px solid #0cf;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.3);
}

.toggle-label[b-051r8cpsst] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.toggle-checkbox[b-051r8cpsst] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #0cf;
}

.toggle-text[b-051r8cpsst] {
    font-family: 'Monda', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #0cf;
    text-shadow: 0 0 5px rgba(0, 204, 255, 0.5);
}

.date-input[b-051r8cpsst] {
    font-family: 'Monda', sans-serif;
    font-size: 14px;
    padding: 5px 10px;
    border: 1px solid #0cf;
    background: rgba(0, 0, 0, 0.3);
    color: #0cf;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.date-input:hover:not(:disabled)[b-051r8cpsst] {
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}

.date-input:disabled[b-051r8cpsst] {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #666;
    color: #666;
}

.date-input[b-051r8cpsst]::-webkit-calendar-picker-indicator {
    filter: invert(68%) sepia(89%) saturate(2278%) hue-rotate(157deg) brightness(104%) contrast(101%);
    cursor: pointer;
}

.date-input:disabled[b-051r8cpsst]::-webkit-calendar-picker-indicator {
    filter: grayscale(100%);
    cursor: not-allowed;
}

.seed-display[b-051r8cpsst] {
    font-family: 'Monda', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    padding: 5px 10px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 4px;
}

.seed-display:hover[b-051r8cpsst] {
    color: #0cf;
    border-color: #0cf;
    box-shadow: 0 0 5px rgba(0, 204, 255, 0.3);
}

/* Dark mode styles for date picker */
.terraformation-puzzle.dark-mode .date-picker-wrapper[b-051r8cpsst] {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-color: #0cf;
}

.terraformation-puzzle.dark-mode .date-input[b-051r8cpsst] {
    background: rgba(0, 0, 0, 0.5);
    color: #0cf;
    border-color: #0cf;
}

.terraformation-puzzle.dark-mode .date-input:disabled[b-051r8cpsst] {
    background: rgba(0, 0, 0, 0.3);
    border-color: #444;
    color: #666;
}

.terraformation-puzzle.dark-mode .seed-display[b-051r8cpsst] {
    color: #0cf;
}

.terraformation-puzzle.dark-mode .seed-display:hover[b-051r8cpsst] {
    border-color: #0cf;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
}

/* /Components/Wordspan/WordspanPuzzle.razor.rz.scp.css */
.puzzle-main[b-p0g2fhmo26] {
    padding-left: 5px;
    padding-right: 5px;
    max-width: 600px;
    height: auto;
    background-color: white;
    scroll-behavior: auto;
}

.puzzle-main:focus[b-p0g2fhmo26] {
    outline: none;
    scroll-behavior: auto;
}

.puzzle-main:focus-visible[b-p0g2fhmo26] {
    outline: none;
}

.puzzle-container[b-p0g2fhmo26] {
    max-width: 500px;
    margin: 0 auto;
    height: auto;
    min-height: auto;
}

.puzzle-display[b-p0g2fhmo26] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.5rem;
}

.divider[b-p0g2fhmo26] {
    border: none;
    height: 2px;
    background-color: #ddd;
    margin: 1rem 0;
}

.guess-rows[b-p0g2fhmo26] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.guess-row[b-p0g2fhmo26] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.guess-row.shake[b-p0g2fhmo26] {
    animation: shake-b-p0g2fhmo26 0.5s ease-in-out;
}

@keyframes shake-b-p0g2fhmo26 {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.letter-box[b-p0g2fhmo26] {
    width: 44px;
    height: 44px;
    border: 3px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    flex-shrink: 0;
    color: black;
}

.letter-box.vowel[b-p0g2fhmo26] {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

.letter-box.jump[b-p0g2fhmo26] {
    animation: jump-b-p0g2fhmo26 0.2s ease-out;
}

.letter-box.mexican-wave[b-p0g2fhmo26] {
    animation: jump-b-p0g2fhmo26 0.2s ease-out;
}

.revealed-letter[b-p0g2fhmo26] {
    color: black;
    font-weight: bold;
}

.hint[b-p0g2fhmo26] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #6c757d;
    flex-shrink: 0;
}

.guess-box[b-p0g2fhmo26] {
    width: 44px;
    height: 44px;
    border: 2px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #f8f9fa;
    color: #333;
    text-transform: uppercase;
    flex-shrink: 0;
}

.guess-box.filled[b-p0g2fhmo26] {
    background-color: #fff;
    border-color: #333;
    color: #333;
    animation: jump-b-p0g2fhmo26 0.2s ease-out;
}

.guess-box.completed[b-p0g2fhmo26] {
    background-color: #dee2e6;
} 

.guess-box.correct[b-p0g2fhmo26] {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.guess-box.empty[b-p0g2fhmo26] {
    background-color: #f8f9fa;
    border-color: #ddd;
    color: transparent;
}

@keyframes jump-b-p0g2fhmo26 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* Keyboard styles */
.keyboard[b-p0g2fhmo26] {
    margin-top: 0.25rem;
}

.keyrow-1[b-p0g2fhmo26] {
    padding: 0 0%;
}

.keyrow-2[b-p0g2fhmo26] {
    padding: 0 5%;
}

.keyrow-3[b-p0g2fhmo26] {
    padding: 0 4%;
}

.key-del[b-p0g2fhmo26] {
    max-width: 50px;
    font-size: 12px;
    background-color: #d3d6da;
    color: #333;
    border: none;
    border-radius: 4px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0px 2px 10px 2px;
    flex: 1;
    padding: 0px;
}

.key-enter[b-p0g2fhmo26] {
    min-width: 50px;
    max-width: 70px;
    font-size: 12px;
    background-color: #d3d6da;
    color: #333;
    border: none;
    border-radius: 4px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    margin: 0px 2px 10px 2px;
    flex: 1;
    padding: 0px;
}

.key-enter:disabled[b-p0g2fhmo26] {
    background-color: #6c757d;
    color: #fff;
    cursor: not-allowed;
}

/* Responsive design */
@media (max-width: 600px) {
    .puzzle-container[b-p0g2fhmo26] {
        padding: 0.25rem;
        max-width: 350px;
        height: auto;
        min-height: auto;
    }
    
    .puzzle-display[b-p0g2fhmo26] {
        gap: 0.25rem;
        padding: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    .divider[b-p0g2fhmo26] {
        margin: 0.5rem 0;
    }
    
    .guess-rows[b-p0g2fhmo26] {
        gap: 0.25rem;
        margin-bottom: 0.25rem;
    }
    
    .guess-row[b-p0g2fhmo26] {
        gap: 0.25rem;
    }
    
    .letter-box[b-p0g2fhmo26] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        border-width: 2px;
    }
    
    .hint[b-p0g2fhmo26] {
        font-size: 1rem;
    }
    
    .guess-box[b-p0g2fhmo26] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .keyboard[b-p0g2fhmo26] {
        margin-top: 0.25rem;
    }
}

@media (max-width: 400px) {
    .puzzle-container[b-p0g2fhmo26] {
        padding: 0.25rem;
        max-width: 280px;
        height: auto;
        min-height: auto;
    }
    
    .puzzle-display[b-p0g2fhmo26] {
        gap: 0.2rem;
        padding: 0.2rem;
        margin-bottom: 0.5rem;
    }
    
    .divider[b-p0g2fhmo26] {
        margin: 0.5rem 0;
    }
    
    .guess-rows[b-p0g2fhmo26] {
        gap: 0.2rem;
        margin-bottom: 0.25rem;
    }
    
    .guess-row[b-p0g2fhmo26] {
        gap: 0.2rem;
    }
    
    .letter-box[b-p0g2fhmo26] {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .hint[b-p0g2fhmo26] {
        font-size: 0.9rem;
    }
    
    .guess-box[b-p0g2fhmo26] {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .keyboard[b-p0g2fhmo26] {
        margin-top: 0.25rem;
    }
} 

.puzzle-main[b-p0g2fhmo26], .puzzle-container[b-p0g2fhmo26] {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-fpgbzh82yz] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-fpgbzh82yz] {
    flex: 1;
}

.sidebar[b-fpgbzh82yz] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-fpgbzh82yz] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-fpgbzh82yz]  a, .top-row[b-fpgbzh82yz]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-fpgbzh82yz]  a:hover, .top-row[b-fpgbzh82yz]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-fpgbzh82yz]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-fpgbzh82yz] {
        justify-content: space-between;
    }

    .top-row[b-fpgbzh82yz]  a, .top-row[b-fpgbzh82yz]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-fpgbzh82yz] {
        flex-direction: row;
    }

    .sidebar[b-fpgbzh82yz] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-fpgbzh82yz] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-fpgbzh82yz]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-fpgbzh82yz], article[b-fpgbzh82yz] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* Puzzle Container */
.puzzle-boxes-wrapper[b-r0zota5rl4] {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
}

/* Puzzle Descriptions — same rounded, soft-edged surface as the puzzle cards. */
.puzzle-descriptions[b-r0zota5rl4] {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(40, 20, 30, 0.06), 0 8px 20px -12px rgba(40, 20, 30, 0.3);
    padding: 1.5rem;
    margin-top: 2rem;
}

.description-content[b-r0zota5rl4] {
    max-width: 800px;
    margin: 0 auto;
}

.puzzle-desc-item[b-r0zota5rl4] {
    margin-bottom: 1.5rem;
}

.puzzle-desc-item:last-child[b-r0zota5rl4] {
    margin-bottom: 0;
}

.puzzle-desc-item h3[b-r0zota5rl4] {
    margin-bottom: 0.5rem;
    color: #333;
}

.puzzle-desc-item p[b-r0zota5rl4] {
    line-height: 1.6;
    color: #555;
    margin: 0;
}

@media (max-width: 768px) {
    .puzzle-descriptions[b-r0zota5rl4] {
        padding: 1rem;
    }

    .description-content h2[b-r0zota5rl4] {
        font-size: 1.25rem;
    }

    .puzzle-desc-item h3[b-r0zota5rl4] {
        font-size: 1rem;
    }

    .puzzle-desc-item p[b-r0zota5rl4] {
        font-size: 0.9rem;
    }
}
/* /Pages/Join.razor.rz.scp.css */
/* Puzzle Container */
.puzzle-boxes-wrapper[b-eureqdok04] {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
}

/* Horizontal Rules */
.home-hr[b-eureqdok04] {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Puzzle Descriptions */
.puzzle-descriptions[b-eureqdok04] {
    background-color: white;
    border: 1px solid black;
    border-radius: 0.25rem;
    padding: 1.5rem;
}

.description-content[b-eureqdok04] {
    max-width: 800px;
    margin: 0 auto;
}

.puzzle-desc-item[b-eureqdok04] {
    margin-bottom: 1.5rem;
}

.puzzle-desc-item:last-child[b-eureqdok04] {
    margin-bottom: 0;
}

.puzzle-desc-item h3[b-eureqdok04] {
    margin-bottom: 0.5rem;
    color: #333;
}

.puzzle-desc-item p[b-eureqdok04] {
    line-height: 1.6;
    color: #555;
    margin: 0;
}

@media (max-width: 768px) {
    .puzzle-descriptions[b-eureqdok04] {
        padding: 1rem;
    }

    .description-content h2[b-eureqdok04] {
        font-size: 1.25rem;
    }

    .puzzle-desc-item h3[b-eureqdok04] {
        font-size: 1rem;
    }

    .puzzle-desc-item p[b-eureqdok04] {
        font-size: 0.9rem;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Puzzle Container */
.puzzle-boxes-wrapper[b-z1nz0oz7oe] {
    margin-left: 0.125rem;
    margin-right: 0.125rem;
}

/* Horizontal Rules */
.home-hr[b-z1nz0oz7oe] {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Puzzle Descriptions */
.puzzle-descriptions[b-z1nz0oz7oe] {
    background-color: white;
    border: 1px solid black;
    border-radius: 0.25rem;
    padding: 1.5rem;
    /* override Bulma card box-shadow */
    box-shadow: none;
}

.description-content[b-z1nz0oz7oe] {
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .puzzle-descriptions[b-z1nz0oz7oe] {
        padding: 1rem;
    }

    .description-content h2[b-z1nz0oz7oe] {
        font-size: 1.25rem;
    }
}
/* /Pages/Quickflip.razor.rz.scp.css */
.tile-button[b-bhyrve4nyd] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.375rem;
    font-size: 1.25rem;
    font-weight: bold;
    transition: transform 0.5s;
    backface-visibility: hidden;
    cursor: pointer;
    background-color: #f5f5f5;
    box-shadow: 2px 2px;
}

    .tile-button.back[b-bhyrve4nyd] {
        transform: rotateY(180deg);
    }

    .tile-button:hover[b-bhyrve4nyd] {
        transform: scale(1.05);
    }

    .tile-button.back:hover[b-bhyrve4nyd] {
        transform: rotateY(180deg) scale(1.05);
    }

[b-bhyrve4nyd] .switch[type=checkbox].is-small:checked + label:before
{
    background-color: pink !important;
}
/* /Pages/Stickers.razor.rz.scp.css */
.sticker-page[b-s7bs8luh1c] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.sticker-hero[b-s7bs8luh1c] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.sticker-hero h1[b-s7bs8luh1c] {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 0.4rem;
}

.sticker-hero p[b-s7bs8luh1c] {
    color: #777;
}

.sticker-section[b-s7bs8luh1c] {
    margin-bottom: 2.5rem;
}

.sticker-section h2[b-s7bs8luh1c] {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    border-bottom: 2px solid #eee;
    padding-bottom: 0.4rem;
    margin-bottom: 1.5rem;
}

.sticker-grid[b-s7bs8luh1c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.5rem;
    justify-items: center;
}

.sticker[b-s7bs8luh1c] {
    margin: 0;
    width: 100%;
    max-width: 170px;
    transition: transform 0.15s ease;
}

.sticker:hover[b-s7bs8luh1c] {
    transform: translateY(-4px) scale(1.04) rotate(-1deg);
}

.sticker svg[b-s7bs8luh1c] {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.22));
}
/* /Pages/Wordspan.razor.rz.scp.css */
.puzzle-main[b-3zvdvqh3zm] {
    padding-left: 5px;
    padding-right: 5px;
    max-width: 600px;
    height: auto;
    background-color: white;
    scroll-behavior: auto;
}

.puzzle-main:focus[b-3zvdvqh3zm] {
    outline: none;
    scroll-behavior: auto;
}

.puzzle-main:focus-visible[b-3zvdvqh3zm] {
    outline: none;
}

.puzzle-container[b-3zvdvqh3zm] {
    max-width: 500px;
    margin: 0 auto;
    height: auto;
    min-height: auto;
}

.puzzle-display[b-3zvdvqh3zm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.5rem;
}

.divider[b-3zvdvqh3zm] {
    border: none;
    height: 2px;
    background-color: #ddd;
    margin: 1rem 0;
}

.guess-rows[b-3zvdvqh3zm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.guess-row[b-3zvdvqh3zm] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.guess-row.shake[b-3zvdvqh3zm] {
    animation: shake-b-3zvdvqh3zm 0.5s ease-in-out;
}

@keyframes shake-b-3zvdvqh3zm {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.letter-box[b-3zvdvqh3zm] {
    width: 44px;
    height: 44px;
    border: 3px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    flex-shrink: 0;
    color: black;
}

.letter-box.vowel[b-3zvdvqh3zm] {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}

.letter-box.jump[b-3zvdvqh3zm] {
    animation: jump-b-3zvdvqh3zm 0.2s ease-out;
}

.letter-box.mexican-wave[b-3zvdvqh3zm] {
    animation: jump-b-3zvdvqh3zm 0.2s ease-out;
}

.revealed-letter[b-3zvdvqh3zm] {
    color: black;
    font-weight: bold;
}

.hint[b-3zvdvqh3zm] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #6c757d;
    flex-shrink: 0;
}

.guess-box[b-3zvdvqh3zm] {
    width: 44px;
    height: 44px;
    border: 2px solid #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    background-color: #f8f9fa;
    color: #333;
    text-transform: uppercase;
    flex-shrink: 0;
}

.guess-box.filled[b-3zvdvqh3zm] {
    background-color: #fff;
    border-color: #333;
    color: #333;
    animation: jump-b-3zvdvqh3zm 0.2s ease-out;
}

.guess-box.completed[b-3zvdvqh3zm] {
    background-color: #dee2e6;
} 

.guess-box.correct[b-3zvdvqh3zm] {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

.guess-box.empty[b-3zvdvqh3zm] {
    background-color: #f8f9fa;
    border-color: #ddd;
    color: transparent;
}

@keyframes jump-b-3zvdvqh3zm {
    0% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* Keyboard styles */
.keyboard[b-3zvdvqh3zm] {
    margin-top: 0.25rem;
}

.keyrow-1[b-3zvdvqh3zm] {
    padding: 0 0%;
}

.keyrow-2[b-3zvdvqh3zm] {
    padding: 0 5%;
}

.keyrow-3[b-3zvdvqh3zm] {
    padding: 0 4%;
}

.key-del[b-3zvdvqh3zm] {
    max-width: 50px;
    font-size: 12px;
    background-color: #d3d6da;
    color: #333;
    border: none;
    border-radius: 4px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0px 2px 10px 2px;
    flex: 1;
    padding: 0px;
}

.key-enter[b-3zvdvqh3zm] {
    min-width: 50px;
    max-width: 70px;
    font-size: 12px;
    background-color: #d3d6da;
    color: #333;
    border: none;
    border-radius: 4px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    margin: 0px 2px 10px 2px;
    flex: 1;
    padding: 0px;
}

.key-enter:disabled[b-3zvdvqh3zm] {
    background-color: #6c757d;
    color: #fff;
    cursor: not-allowed;
}

/* Responsive design */
@media (max-width: 600px) {
    .puzzle-container[b-3zvdvqh3zm] {
        padding: 0.25rem;
        max-width: 350px;
        height: auto;
        min-height: auto;
    }
    
    .puzzle-display[b-3zvdvqh3zm] {
        gap: 0.25rem;
        padding: 0.25rem;
        margin-bottom: 0.5rem;
    }
    
    .divider[b-3zvdvqh3zm] {
        margin: 0.5rem 0;
    }
    
    .guess-rows[b-3zvdvqh3zm] {
        gap: 0.25rem;
        margin-bottom: 0.25rem;
    }
    
    .guess-row[b-3zvdvqh3zm] {
        gap: 0.25rem;
    }
    
    .letter-box[b-3zvdvqh3zm] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        border-width: 2px;
    }
    
    .hint[b-3zvdvqh3zm] {
        font-size: 1rem;
    }
    
    .guess-box[b-3zvdvqh3zm] {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .keyboard[b-3zvdvqh3zm] {
        margin-top: 0.25rem;
    }
}

@media (max-width: 400px) {
    .puzzle-container[b-3zvdvqh3zm] {
        padding: 0.25rem;
        max-width: 280px;
        height: auto;
        min-height: auto;
    }
    
    .puzzle-display[b-3zvdvqh3zm] {
        gap: 0.2rem;
        padding: 0.2rem;
        margin-bottom: 0.5rem;
    }
    
    .divider[b-3zvdvqh3zm] {
        margin: 0.5rem 0;
    }
    
    .guess-rows[b-3zvdvqh3zm] {
        gap: 0.2rem;
        margin-bottom: 0.25rem;
    }
    
    .guess-row[b-3zvdvqh3zm] {
        gap: 0.2rem;
    }
    
    .letter-box[b-3zvdvqh3zm] {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .hint[b-3zvdvqh3zm] {
        font-size: 0.9rem;
    }
    
    .guess-box[b-3zvdvqh3zm] {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }
    
    .keyboard[b-3zvdvqh3zm] {
        margin-top: 0.25rem;
    }
} 

.puzzle-main[b-3zvdvqh3zm], .puzzle-container[b-3zvdvqh3zm] {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}