/* robi_hunt — global + mobile-first styles. */

:root {
    --rh-touch-min: 44px;
    --rh-safe-bottom: env(safe-area-inset-bottom, 0px);
    --rh-safe-top: env(safe-area-inset-top, 0px);
    --rh-bg-dark: #101827;
    --rh-self-cyan: #22D3EE;
    --rh-catcher-blue: #3B82F6;
    --rh-agent-amber: #F59E0B;
    --rh-danger-red: #EF4444;
    --rh-smoke-gray: #9CA3AF;
    --rh-camera-violet: #8B5CF6;
    --rh-time-green: #10B981;
    --rh-slate: #334155;
    --rh-white: #F8FAFC;
    --rh-dark-outline: #0F172A;
}

/* Role/status badges with palette-consistent colors. The Bootstrap
 * ``.bg-danger`` etc. utilities use slightly different hex values
 * than our palette — using these classes keeps the in-app badges
 * aligned with map markers, asset SVGs, and the catalog. */
.badge-rh-agent-x      { background-color: var(--rh-danger-red);     color: var(--rh-white); }
.badge-rh-catcher      { background-color: var(--rh-catcher-blue);   color: var(--rh-white); }
.badge-rh-observer     { background-color: var(--rh-camera-violet);  color: var(--rh-white); }
.badge-rh-admin        { background-color: var(--rh-agent-amber);    color: var(--rh-dark-outline); }
.badge-rh-cloaked      { background-color: var(--rh-camera-violet);  color: var(--rh-white); }
.badge-rh-retired      { background-color: var(--rh-danger-red);     color: var(--rh-white); }
.badge-rh-paused       { background-color: var(--rh-danger-red);     color: var(--rh-white); }
.badge-rh-disconnected { background-color: var(--rh-slate);          color: var(--rh-white); }
.badge-rh-reconnecting { background-color: var(--rh-self-cyan);      color: var(--rh-dark-outline); }
.badge-rh-no-gps       { background-color: var(--rh-agent-amber);    color: var(--rh-dark-outline); }
.badge-rh-gps-low      { background-color: var(--rh-agent-amber);    color: var(--rh-dark-outline); }
.badge-rh-gps-warn     { background-color: var(--rh-danger-red);     color: var(--rh-white); }
.badge-rh-connected    { background-color: var(--rh-time-green);     color: var(--rh-dark-outline); }
.badge-rh-victory      { background-color: var(--rh-time-green);     color: var(--rh-white); }

/* Admin-clickable role badge: rendered as <button> for keyboard
 * activation, so three independent layers must be neutralized to match
 * a sibling span.badge — (1) the user-agent button affordance (system
 * font, native border, subtle background gradient) via appearance:
 * none, (2) Bootstrap's button reboot that lets font-family/size/
 * line-height inherit from the page — we re-state Bootstrap .badge
 * font metrics, and (3) the project-wide ``button { min-height: 44px }``
 * touch-target floor a few rules below — a role chip is a small inline
 * affordance, not a primary tap target, so we opt out with
 * ``min-height: auto`` (same pattern as ``.btn-link`` and
 * ``.color-swatch``). Without (3) the button stayed ~44px tall while
 * the sibling span rendered at ~20px, which is what made the previous
 * fix attempt look like it hadn't worked. */
.badge.role-clickable {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    min-height: auto;
    cursor: pointer;
    transition: filter 0.1s ease-in-out;
}
/* :focus-visible (not :focus) keeps a mouse click from leaving the
 * badge in a permanently-brightened state — that was the source of
 * the "color looks slightly off" perception after assigning a role. */
.badge.role-clickable:hover,
.badge.role-clickable:focus-visible {
    filter: brightness(1.15);
}

/* Settings group cards. The header is a clickable strip; the body
 * collapses via the .d-none utility (toggled in Brython, no Bootstrap
 * JS bundle loaded). The chevron icon swaps between bi-chevron-right
 * and bi-chevron-down at click time. */
.settings-group-toggle {
    cursor: pointer;
    user-select: none;
}
.settings-group-chevron {
    transition: color 0.1s ease-in-out;
}

/* The slider + paired number input share a row. Cap the number input
 * width so the slider gets most of the horizontal space; keep both
 * controls finger-friendly on phones. */
.slider-number-input {
    width: 5.5rem;
    flex: 0 0 auto;
}
.form-range {
    /* Bootstrap defaults give a tiny thumb on touch screens; bump it. */
    height: 2rem;
}

/* Stepper: keep the value field narrow and centered, the ± buttons
 * wide enough for a thumb tap. */
.stepper-value {
    max-width: 5rem;
}
.stepper .btn {
    min-width: 2.75rem;
}

.setting-row .form-label {
    word-break: break-word;
}

/* Allocation-table rows: caption on its own line above, role picker +
 * count stepper share the second line. The single-row variant pushed
 * the ``+`` button off the right edge on phones — stacking saves
 * horizontal space without losing tap-target sizing. The label line
 * is a flex row so the item icon sits next to the kind label without
 * a manual horizontal margin. */
.allocation-row-label {
    font-weight: 600;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.allocation-row-icon-img,
.checkbox-row-icon-img,
.allocation-readonly-icon-img {
    vertical-align: middle;
    flex-shrink: 0;
}
.allocation-role-group .btn[disabled] {
    opacity: 0.6;
}
.allocation-count {
    width: auto;
    flex: 0 0 auto;
}
.allocation-count .form-control {
    max-width: 3.5rem;
}

/* Non-admin allocation readout: compact role-badged table inside the
 * setting row. Counts right-align so the eye can scan totals. */
.allocation-readonly-table {
    background: transparent;
    color: inherit;
    margin-bottom: 0;
}
.allocation-readonly-table td {
    border: 0;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
}
.allocation-readonly-icon {
    width: 1%;
    white-space: nowrap;
}
.allocation-readonly-role {
    width: 1%;
    white-space: nowrap;
}
.allocation-readonly-count {
    width: 1%;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Non-admin allowed_kinds readout: one row per known kind with an
 * item icon, German label, and an Aktiv/Inaktiv state badge. Mirrors
 * the allocation-readonly visual idiom — borderless rows, padded,
 * with the state column right-aligned so the eye can scan it. */
.checkbox-readonly-table {
    background: transparent;
    color: inherit;
    margin-bottom: 0;
}
.checkbox-readonly-table td {
    border: 0;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
}
.checkbox-readonly-icon {
    width: 1%;
    white-space: nowrap;
}
.checkbox-readonly-icon-img {
    vertical-align: middle;
}
.checkbox-readonly-state {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Checkbox group for allowed_kinds: explicit flex row per kind avoids
 * Bootstrap's float-based .form-check layout, which combined with the
 * project-wide .form-check-input { min-height: var(--rh-touch-min) }
 * touch-target rule used to visually push the boxes to the very left
 * edge of the Item-Spawning card. The flex row keeps the box + label
 * aligned and the row itself takes the 44px tap target so the input
 * can relax back to a normal 1.25rem square. */
.checkbox-group .checkbox-row {
    padding: 0.35rem 0;
    min-height: var(--rh-touch-min);
}
.checkbox-group .checkbox-row-label {
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.checkbox-group .form-check-input {
    min-height: auto;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin: 0;
}

html, body {
    background: var(--rh-bg-dark);
    color: #F8FAFC;
    -webkit-tap-highlight-color: transparent;
}

main.container {
    color-scheme: dark;
}

/* Ensure form inputs render legibly on the dark backdrop. */
.form-control, .form-select {
    background-color: #1f2937;
    color: #F8FAFC;
    border-color: #334155;
}
.form-control:focus, .form-select:focus {
    background-color: #1f2937;
    color: #F8FAFC;
    border-color: var(--rh-self-cyan);
    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.25);
}
.form-control[readonly] {
    opacity: 0.85;
}

/* Touch targets — every clickable control respects 44pt minimum. */
.btn, .form-check-input, .form-select, .form-control,
button, [role="button"] {
    min-height: var(--rh-touch-min);
}
.btn-sm {
    min-height: 36px;  /* secondary controls relax the minimum a bit */
}
.btn-link {
    min-height: auto;  /* in-text links don't need 44pt */
}

/* Boolean lobby switches use Bootstrap's switch skin without its
 * float-based .form-check layout. The wrapper owns the 44px touch row;
 * the input stays in normal flow so the following help text cannot wrap
 * beside or through the switch. */
.settings-switch.form-switch {
    padding-left: 0;
    margin-bottom: 0;
    min-height: var(--rh-touch-min);
    cursor: pointer;
    user-select: none;
}
.settings-switch .form-check-input {
    float: none;
    margin: 0;
    min-height: auto;
    width: 2.75rem;
    height: 1.5rem;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Lobby map preview
 * ------------------------------------------------------------------- */
#play-area-map {
    touch-action: pan-x pan-y;  /* allow OL panning, suppress double-tap zoom */
    border-radius: 0.375rem;
    overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Play view: map + chrome
 * ------------------------------------------------------------------- */
#game-shell {
    padding-bottom: calc(var(--rh-safe-bottom) + 0.5rem);
}

#timer-ribbon {
    position: sticky;
    top: 0;
    z-index: 5;
}
#timer-ribbon .card-body {
    background: rgba(17, 24, 39, 0.92);
    backdrop-filter: blur(6px);
    color: #F8FAFC;
}

#map {
    /* OpenLayers needs touch-action: none on the map element so gestures
     * (pinch zoom, drag) don't get hijacked by the browser's default
     * double-tap zoom or back-swipe. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px #1f2937;
}

#catch-btn {
    /* Safe-area aware so the Catch button never slides under the iPhone
     * home indicator. */
    padding-top: 0.85rem;
    padding-bottom: max(0.85rem, var(--rh-safe-bottom));
    font-size: 1.15rem;
    font-weight: 600;
}
#catch-btn:disabled {
    opacity: 0.55;
}

#items-drawer-toggle {
    padding-top: 0.85rem;
    padding-bottom: max(0.85rem, var(--rh-safe-bottom));
}

#items-drawer .list-group-item {
    background: #1f2937;
    color: #F8FAFC;
    border-color: #334155;
}

/* ---------------------------------------------------------------------
 * Events drawer (Stage 4.4 — toggled via the lobby-code badge)
 * ------------------------------------------------------------------- */
#events-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 90vw);
    background: #0f172a;
    border-left: 1px solid #334155;
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
    z-index: 20;
    padding: calc(var(--rh-safe-top) + 0.75rem) 0.75rem
             calc(var(--rh-safe-bottom) + 0.75rem) 0.75rem;
    overflow-y: auto;
}
#events-drawer.open {
    transform: translateX(0);
}
#events-drawer .event-row {
    padding: 0.4rem 0;
    border-bottom: 1px solid #1f2937;
    font-size: 0.92rem;
}
#events-drawer .event-row .when {
    color: var(--rh-smoke-gray);
    font-size: 0.78rem;
}

/* ---------------------------------------------------------------------
 * Toasts
 * ------------------------------------------------------------------- */
#toasts {
    z-index: 30;
    padding-bottom: max(1rem, var(--rh-safe-bottom));
}
#toasts .toast {
    min-width: 220px;
}

/* ---------------------------------------------------------------------
 * Phones: tighter padding, edge-to-edge map
 * ------------------------------------------------------------------- */
@media (max-width: 576px) {
    main.container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    #map {
        height: calc(100vh - 230px) !important;
        min-height: 320px;
    }
    h3 {
        font-size: 1.25rem;
    }
}

/* ---------------------------------------------------------------------
 * Avatar picker — color swatches
 * ------------------------------------------------------------------- */
.color-swatch {
    width: 34px;
    height: 34px;
    min-height: 34px;  /* override the global 44pt min-height for .btn */
    border-radius: 50%;
    border: 2px solid rgba(248, 250, 252, 0.25);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #F8FAFC;
    font-size: 1.1rem;
    line-height: 1;
    position: relative;
    transition: transform 0.08s ease-out;
}
.color-swatch:hover:not(:disabled) {
    transform: scale(1.08);
}
.color-swatch--selected {
    border-color: #F8FAFC;
    box-shadow: 0 0 0 2px var(--rh-bg-dark) inset,
                0 0 0 3px #F8FAFC;
}
.color-swatch--selected .bi-check-lg {
    filter: drop-shadow(0 0 2px rgba(15, 23, 42, 0.85));
}
.color-swatch--taken {
    opacity: 0.35;
    cursor: not-allowed;
}
.color-swatch--taken::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 2px;
    background: #F8FAFC;
    transform: rotate(-30deg);
    transform-origin: center;
    border-radius: 1px;
}

/* ---------------------------------------------------------------------
 * Lobby player rows + inventory icons
 * ------------------------------------------------------------------- */
.lobby-avatar {
    vertical-align: middle;
}
.item-icon {
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * Map recenter button (overlay on both lobby + play maps)
 * ------------------------------------------------------------------- */
.map-wrap {
    position: relative;
}
.map-recenter-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--rh-white);
    border: 1px solid var(--rh-slate);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}
.map-recenter-btn:hover {
    background: #e2e8f0;
}
.map-recenter-btn img {
    width: 22px;
    height: 22px;
    pointer-events: none;
}

/* Item popup — shown over the map when the user clicks a spawned item.
   Two stacked lines: bold name + muted description. Tap anywhere on the
   popup to dismiss it (pointer-events re-enabled so the tap registers). */
.item-popup {
    position: absolute;
    background: #1f2937;
    color: var(--rh-white);
    border-radius: 6px;
    padding: 0.45em 0.75em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    font-size: 0.85rem;
    line-height: 1.3;
    pointer-events: auto;
    transform: translate(-50%, calc(-100% - 10px));
    z-index: 5;
    max-width: 240px;
    cursor: pointer;
}
.item-popup-name {
    font-weight: 600;
}
.item-popup-desc {
    margin-top: 0.2em;
    color: var(--rh-smoke-gray);
    font-size: 0.78rem;
}
.item-popup-timer {
    margin-top: 0.3em;
    color: var(--rh-smoke-gray);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

/* Items drawer — small description line under each item name. */
.item-row-desc {
    display: block;
    margin-top: 0.1em;
    font-size: 0.72rem;
    line-height: 1.2;
}

/* ---------------------------------------------------------------------
 * Players drawer (mirrors items drawer)
 * ------------------------------------------------------------------- */
#players-drawer .list-group-item {
    background: #1f2937;
    color: var(--rh-white);
    border-color: var(--rh-slate);
}
.player-row-avatar {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}
.player-row-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.player-row-status img {
    width: 14px;
    height: 14px;
}
.player-row-inventory {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.player-row-inventory img {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------------------
 * Game-end result overlay
 * ------------------------------------------------------------------- */
#result-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.92);
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}
#result-overlay img {
    width: 140px;
    height: 140px;
    margin-bottom: 1.25rem;
}
#result-overlay h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
}
#result-overlay p {
    color: var(--rh-smoke-gray);
    margin-bottom: 1.5rem;
}

/* ---------------------------------------------------------------------
 * GPS status badge (play view header)
 * ------------------------------------------------------------------- */
#gps-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 0.78rem;
}
#gps-status-badge img {
    width: 14px;
    height: 14px;
}

/* ---------------------------------------------------------------------
 * Start-button hint as alert
 * ------------------------------------------------------------------- */
#start-game-hint.alert {
    margin-top: 0.5rem;
    margin-bottom: 0;
    padding: 0.6rem 0.85rem;
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------------------
 * Helpers
 * ------------------------------------------------------------------- */
.cursor-pointer {
    cursor: pointer;
}

/* Clicks on the inner glyph image or check icon must still target the
   surrounding button so event.target carries data-glyph / data-color. */
#avatar-picker button > img,
#avatar-picker button > i {
    pointer-events: none;
}