/* The first-session guidance.
   index.html loads the stylesheets in a fixed order (Game/docs/ui-style.md, "Stylesheets"). */

/* ---------------------------------------------------------------------------
   The first-session guidance (Components/Guide/GuideFinger.razor, Game/docs/first-session-guide.md)
   A small bouncing arrow next to one control and one short line in a small light speech bubble. wwwroot/guide.js sets
   their positions relative to the screen (#app, whose container type makes it the containing block of a fixed element):
   the arrow just outside the control's edge, and the bubble centred on the arrow, as wide as its text needs and at most
   22rem or the screen's width less the 16 px gutters. We draw no dimmed backdrop, and pointer-events: none lets the browser
   send every tap to the screen under the guide. The script adds .rj-guide-target to the control, and the rule below gives
   the control a soft glow in the arrow's colour.
   --------------------------------------------------------------------------- */
.rj-guide {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

.rj-guide.is-off,
.rj-guide[data-placed="false"] { visibility: hidden; }

/* The pointer: a small rounded arrow in the theme's colour with a white rim. GuideFinger.razor draws it pointing up, which
   is right for a pointer below the control. */
.rj-guide__finger {
    position: fixed;
    width: 1.8rem;
    height: 1.8rem;
    animation: rj-guide-bob 0.55s ease-in-out infinite alternate;
}

.rj-guide__finger svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 1.5px 0 var(--ui-outline)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}

.rj-guide__arrow {
    fill: var(--ui-pointer);
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

/* Above the control, the arrow points down; left of it, right; right of it, left. */
.rj-guide[data-side="above"] .rj-guide__finger svg { transform: rotate(180deg); }
.rj-guide[data-side="above"] .rj-guide__finger { animation-name: rj-guide-bob-down; }
.rj-guide[data-side="left"] .rj-guide__finger svg { transform: rotate(90deg); }
.rj-guide[data-side="left"] .rj-guide__finger { animation-name: rj-guide-bob-right; }
.rj-guide[data-side="right"] .rj-guide__finger svg { transform: rotate(-90deg); }
.rj-guide[data-side="right"] .rj-guide__finger { animation-name: rj-guide-bob-left; }

/* The arrow moves a little towards the control and back. guide.js places it 4 px from the control's edge, and the arrow moves only
   into that gap, so it never moves onto a neighbouring button. */
@keyframes rj-guide-bob {
    from { transform: translateY(0); }
    to   { transform: translateY(-0.22rem); }
}

@keyframes rj-guide-bob-down {
    from { transform: translateY(0); }
    to   { transform: translateY(0.22rem); }
}

@keyframes rj-guide-bob-right {
    from { transform: translateX(0); }
    to   { transform: translateX(0.22rem); }
}

@keyframes rj-guide-bob-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-0.22rem); }
}

/* The line: a small speech bubble in the theme's light colour with dark display text and a soft shadow. guide.js sets the
   bubble's maximum width, data-tail to the edge that faces the arrow and --tail-x to the arrow's position along it. The
   bubble scales up from its tail when it appears. */
.rj-guide__bubble {
    position: fixed;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: 0.45rem 0.8rem 0.5rem;
    border-radius: 1.1rem;
    background: var(--ui-bubble);
    color: var(--ui-bubble-ink);
    font-family: var(--ui-font-display);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.18;
    text-align: center;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.22);
    transform-origin: var(--tail-x, 50%) 50%;
    animation: rj-guide-pop 0.3s var(--ui-pop) both;
}

.rj-guide__bubble[data-tail="top"]    { transform-origin: var(--tail-x, 50%) 0; }
.rj-guide__bubble[data-tail="bottom"] { transform-origin: var(--tail-x, 50%) 100%; }

.rj-guide__bubble::after {
    content: "";
    position: absolute;
    left: var(--tail-x, 50%);
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.12rem;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.rj-guide__bubble[data-tail="top"]::after    { top: -0.3rem; }
.rj-guide__bubble[data-tail="bottom"]::after { bottom: -0.3rem; }
.rj-guide__bubble:not([data-tail="top"]):not([data-tail="bottom"])::after { display: none; }

@keyframes rj-guide-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* The control: a soft glow in the arrow's colour that grows and fades. A drop shadow follows the control's own shape, so a
   round button or a structure's art glows along its edge instead of inside a box. The animation replaces the control's own
   filter while the guide points at it, so the second drop shadow keeps the depth that most controls draw. */
.rj-guide-target {
    animation: rj-guide-glow 1.6s ease-in-out infinite;
}

@keyframes rj-guide-glow {
    0%, 100% { filter: drop-shadow(0 0 0.1rem color-mix(in srgb, var(--ui-pointer) 35%, transparent)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }
    50%      { filter: drop-shadow(0 0 0.55rem color-mix(in srgb, var(--ui-pointer) 85%, transparent)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)); }
}

/* ---------------------------------------------------------------------------
   The callout (Components/Guide/Callout.razor, Game/docs/ui-style.md, "Callout")
   One big line in the display font and an optional small second line in a rounded bubble with a tail, over a screen for a
   moment after a dig or a reward, or as a nudge while the player waits. The outer element places the callout; the bubble
   inside it moves, so the two transforms do not fight. With pointer-events: none, the browser sends a tap on the callout
   to the screen under it.
   --------------------------------------------------------------------------- */
.rj-callout {
    --callout-time: 1.8s;
    --callout-reward: #ffd23f;
    z-index: 2500;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.rj-callout--above,
.rj-callout--below {
    position: absolute;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 2rem);
    transform: translateX(-50%);
}

.rj-callout--above { bottom: 0.4rem; }
.rj-callout--below { top: 0.4rem; }

.rj-callout__bubble {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 0.45rem;
    box-sizing: border-box;
    padding: 0.35rem 1rem 0.45rem;
    border-radius: 1.2rem;
    background: var(--ui-bubble);
    color: var(--ui-bubble-ink);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.28);
    text-align: center;
    white-space: nowrap;
}

.rj-callout--above .rj-callout__bubble { transform-origin: 50% 100%; }
.rj-callout--below .rj-callout__bubble { transform-origin: 50% 0; }

.rj-callout--above .rj-callout__bubble::after,
.rj-callout--below .rj-callout__bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.12rem;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.rj-callout--above .rj-callout__bubble::after { bottom: -0.3rem; }
.rj-callout--below .rj-callout__bubble::after { top: -0.3rem; }

.rj-callout__icon {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
}

.rj-callout__icon > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rj-callout__main {
    font-family: var(--ui-font-display);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.rj-callout__sub {
    font-family: var(--ui-font-display);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

/* A reward: gold display text with the theme's dark outline. */
.rj-callout--reward .rj-callout__main {
    color: var(--callout-reward);
    -webkit-text-stroke: 0.16em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--ui-outline);
}

/* A nudge: the theme's main colour with white display text, so the player sees it from the corner of an eye. */
.rj-callout--prompt .rj-callout__bubble {
    background: linear-gradient(to bottom, var(--ui-primary-light), var(--ui-primary));
    color: var(--ui-on-primary);
    box-shadow: inset 0 0 0 2px var(--ui-outline), 0 3px 0 var(--ui-outline), 0 8px 20px rgba(0, 0, 0, 0.3);
}

.rj-callout--prompt .rj-callout__bubble::after {
    background: var(--ui-primary);
    box-shadow: 2px 2px 0 0 var(--ui-outline);
}

.rj-callout--below.rj-callout--prompt .rj-callout__bubble::after { box-shadow: -2px -2px 0 0 var(--ui-outline); }

.rj-callout--prompt .rj-callout__main {
    color: #ffffff;
    -webkit-text-stroke: 0.14em var(--ui-outline);
    paint-order: stroke fill;
    text-shadow: 0 0.08em 0 var(--ui-outline);
}

.rj-callout--flash .rj-callout__bubble  { animation: rj-callout-flash var(--callout-time) var(--ui-pop) forwards; }
.rj-callout--steady .rj-callout__bubble {
    animation: rj-guide-pop 0.3s var(--ui-pop) both, rj-callout-bob 1.2s ease-in-out 0.3s infinite;
}

@keyframes rj-callout-flash {
    0%   { opacity: 0; transform: scale(0.5); }
    14%  { opacity: 1; transform: scale(1.08); }
    22%  { opacity: 1; transform: scale(1); }
    85%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-0.6rem); }
}

@keyframes rj-callout-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-0.2rem) rotate(-1.5deg); }
    75%      { transform: translateY(-0.2rem) rotate(1.5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rj-guide__finger,
    .rj-guide__bubble,
    .rj-callout--steady .rj-callout__bubble { animation: none; }

    .rj-guide-target {
        animation: none;
        filter: drop-shadow(0 0 0.3rem color-mix(in srgb, var(--ui-pointer) 70%, transparent));
    }

    /* The flash keeps its fade, so the callout still goes away, without the pop and the rise. */
    .rj-callout--flash .rj-callout__bubble { animation: rj-callout-fade var(--callout-time) linear forwards; }
}

@keyframes rj-callout-fade {
    0%, 85% { opacity: 1; }
    100%    { opacity: 0; }
}