/* ============================================================
   2011 re-skin  --  PURSE (top-right cluster) + LOGIN SCREEN
   Owner: purse agent.

   Note on specificity: the app bundle is injected by JS *after*
   this <link>, and it already ships `.nitro-purse-container
   .nitro-purse { ... !important }` rules. Equal specificity +
   later sheet = the bundle wins, so purse rules here are anchored
   on `#root` (id, specificity 1-0-0) to land at all.

   Reference: Example2.webp (2011 hotel view), Example1.jpg (2012 room).
   ============================================================ */

:root {
    --p11-coin-rim: #b9902a;
    --p11-coin-rim-lo: #7d5f14;
    --p11-pill-top: #4a4a48;
    --p11-pill-bot: #2b2b29;
    --p11-ink: #10262f;
    --p11-blue-top: #7db4d2;
    --p11-blue-mid: #4f8dae;
    --p11-blue-bot: #3d7595;
    --p11-pale-top: #f2f0e6;
    --p11-pale-bot: #cfcdc0;
    --p11-pale-ink: #4a4a42;
}

/* ============================================================
   1. PURSE
   Stock build = one translucent dark panel, rounded corner, soft
   drop shadow. 2011 had no panel: loose hard-bordered pills and
   chunky buttons sitting directly on the hotel view.
   ============================================================ */

#root .nitro-purse-container {
    margin-top: 4px !important;
    padding-right: 2px !important;
    /* was Ubuntu - this file was itself forcing the modern face (agent 3) */
    font-family: Volter, "Volter (Goldfish)", monospace;
}

/* kill the panel */
#root .nitro-purse-container .nitro-purse {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 0 auto !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#root .nitro-purse-container .nitro-purse__body {
    gap: 3px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 0 !important;
    background: transparent !important;
}

/* the vertical hairline only made sense inside the panel */
#root .nitro-purse-container .nitro-purse__divider {
    display: none !important;
}

/* ---------- currency pills: dark body, gold rim ---------- */

/* The bundle pins hard px column widths (52 / 101 / 50) with !important and
   the flex line is laid out from those, so we keep its geometry and only
   restyle. Widening a column just makes it overlap its neighbour. */
#root .nitro-purse-container .nitro-purse__currencies {
    gap: 3px !important;
    padding: 0 !important;
    background: transparent !important;
}

#root .nitro-purse-container .nitro-purse .nitro-purse-button {
    box-sizing: border-box !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 21px !important;
    padding: 1px 4px 1px 6px !important;
    border: 2px solid var(--p11-coin-rim) !important;
    border-bottom-color: var(--p11-coin-rim-lo) !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #4a4a48 0%, #4a4a48 48%, #2b2b29 52%, #2b2b29 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 1px 0 rgba(0, 0, 0, 0.45) !important;
}

/* 2011 printed every purse number in flat white, not per-currency colours */
#root .nitro-purse-container .nitro-purse .nitro-purse-button .nitro-purse-button__amount,
#root .nitro-purse-container .nitro-purse .nitro-purse-button .currency-text,
#root .nitro-purse-container .nitro-purse .nitro-purse-button.currency--1 .nitro-purse-button__amount,
#root .nitro-purse-container .nitro-purse .nitro-purse-button.currency-0 .nitro-purse-button__amount,
#root .nitro-purse-container .nitro-purse .nitro-purse-button.currency-5 .nitro-purse-button__amount {
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 13px !important;
    letter-spacing: 0 !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85) !important;
}

#root .nitro-purse-container .nitro-purse .nitro-purse-button .nitro-currency-icon {
    flex: 0 0 12px !important;
    width: 12px !important;
    height: 12px !important;
    image-rendering: pixelated;
}

/* shortened-amount tooltip: hard box, no blur, no translucency */
#root .nitro-purse-container [role='tooltip'] {
    border: 1px solid var(--p11-ink) !important;
    border-radius: 0 !important;
    background: #ffffe1 !important;
    color: #101010 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4) !important;
}

/* ---------- buttons ----------
   Stock buttons are border-image nine-slices. Replaced with the
   2011 recipe: hard 1px border, flat fill, one inner highlight. */

#root .nitro-purse-container .nitro-purse__btn {
    box-sizing: border-box !important;
    justify-content: center !important;
    min-height: 21px !important;
    padding: 0 6px !important;
    border: 1px solid var(--p11-ink) !important;
    border-image: none !important;
    border-image-source: none !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #7db4d2 0%, #4f8dae 46%, #3d7595 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 1px 0 rgba(0, 0, 0, 0.35) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55) !important;
    transition: none !important;
}

#root .nitro-purse-container .nitro-purse__btn:hover {
    border-image-source: none !important;
    background: linear-gradient(180deg, #92c4de 0%, #5f9dbc 46%, #4a83a4 100%) !important;
    filter: none !important;
    transform: none !important;
}

#root .nitro-purse-container .nitro-purse__btn:active {
    border-image-source: none !important;
    background: linear-gradient(180deg, #3d7595 0%, #4f8dae 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45) !important;
    transform: translateY(1px) !important;
}

#root .nitro-purse-container .nitro-purse__col {
    background: transparent !important;
}

#root .nitro-purse-container .nitro-purse__col--primary {
    gap: 3px !important;
    justify-content: flex-start !important;
}

#root .nitro-purse-container .nitro-purse__btn--join span,
#root .nitro-purse-container .nitro-purse__btn--earnings span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
}

#root .nitro-purse-container .nitro-purse__btn--join,
#root .nitro-purse-container .nitro-purse__btn--earnings {
    justify-content: flex-start !important;
    gap: 4px !important;
}

#root .nitro-purse-container .nitro-purse__btn .nitro-currency-icon,
#root .nitro-purse-container .nitro-purse__btn .nitro-purse__btn-img {
    flex: 0 0 auto !important;
    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    image-rendering: pixelated;
}

/* right-hand column: 2011's "Info / Help / Log out" side was pale
   with dark ink on it, not white-on-blue */
#root .nitro-purse-container .nitro-purse__col--actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    justify-content: space-between !important;
    gap: 3px !important;
}

#root .nitro-purse-container .nitro-purse__col--actions > .nitro-purse__btn {
    flex: 0 0 100% !important;
    width: 100% !important;
}

#root .nitro-purse-container .nitro-purse__col--actions > .nitro-purse__btn--logout,
#root .nitro-purse-container .nitro-purse__col--actions > .nitro-purse__btn--settings {
    flex: 0 0 calc(50% - 2px) !important;
    width: calc(50% - 2px) !important;
    min-width: 0 !important;
}

#root .nitro-purse-container .nitro-purse__btn--translate,
#root .nitro-purse-container .nitro-purse__btn--help,
#root .nitro-purse-container .nitro-purse__btn--logout,
#root .nitro-purse-container .nitro-purse__btn--settings {
    background: linear-gradient(180deg, #f2f0e6 0%, #f2f0e6 48%, #cfcdc0 52%, #cfcdc0 100%) !important;
    border-color: var(--p11-pale-ink) !important;
    color: #16323f !important;
    font-size: 10px !important;
    text-shadow: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 0 rgba(0, 0, 0, 0.3) !important;
}

#root .nitro-purse-container .nitro-purse__btn--translate:hover,
#root .nitro-purse-container .nitro-purse__btn--help:hover,
#root .nitro-purse-container .nitro-purse__btn--logout:hover,
#root .nitro-purse-container .nitro-purse__btn--settings:hover {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, #e2e0d4 52%, #e2e0d4 100%) !important;
}

#root .nitro-purse-container .nitro-purse__btn--logout,
#root .nitro-purse-container .nitro-purse__btn--settings {
    padding: 0 !important;
    justify-content: center !important;
}

/* ---------- settings drop-down ---------- */

#root .nitro-purse-container .nitro-purse-menu {
    margin-top: 3px !important;
    padding: 2px !important;
    border: 1px solid var(--p11-ink) !important;
    border-radius: 0 !important;
    background: #e9e7dc !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35) !important;
}

#root .nitro-purse-container .nitro-purse-menu__item {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #16323f !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 3px 8px !important;
    text-shadow: none !important;
}

#root .nitro-purse-container .nitro-purse-menu__item:hover {
    background: #4f8dae !important;
    color: #ffffff !important;
}

#root .nitro-purse-container .nitro-purse-menu__item--disabled,
#root .nitro-purse-container .nitro-purse-menu__item:disabled {
    color: #8e8e86 !important;
    background: transparent !important;
}

/* ---------- seasonal currency strip ---------- */

#root .nitro-purse-container .nitro-purse-seasonal-currency,
#root .nitro-purse-container .nitro-purse__other .nitro-purse-seasonal-currency {
    margin-top: 3px !important;
    border: 2px solid var(--p11-coin-rim) !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #4a4a48 0%, #2b2b29 100%) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45) !important;
}

#root .nitro-purse-container .nitro-purse-seasonal-currency .seasonal-text,
#root .nitro-purse-container .nitro-purse-seasonal-currency .seasonal-amount {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.85) !important;
}

/* The former section 2 (LOGIN SCREEN) was moved out of this file on
   2026-07-30 into the dedicated /skin/2011-login-*.css layer, which owns
   .nitro-login-view. Original preserved at ../2011-purse.css.prelogin2011.bak */


/* == AGENT3-CLIP ==========================================================
   MEASURED (getBoundingClientRect walk, 1920x1080):

     .nitro-purse-seasonal-currency   x=1722 w=192  overflow:hidden
       .seasonal-row                  x=1724 w=188  -> right edge 1912
         .nitro-seasonal-box          x=1887 w=29   -> right edge 1916

   The absolutely-positioned currency-icon box sat 4px past its
   clipping ancestor, so the right-hand column of the cyan icon plate
   (and the coin's outline) was sliced off. Pinning it to right:0
   keeps it inside WITHOUT widening any parent - widening is what
   makes the bundle's pinned-width flex row paint over its neighbour.
   ========================================================= */

#root .nitro-purse-container .nitro-purse-seasonal-currency .nitro-seasonal-box.nitro-seasonal-box {
    right: 0 !important;
    left: auto !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* The 105-currency plate is a bitmap: never let it resample. */
#root .nitro-purse-container .nitro-purse-seasonal-currency .seasonal-image {
    image-rendering: pixelated;
    max-width: 100%;
    max-height: 100%;
}


/* == AGENT3-FIT ==============================================
   Volter is a wider bitmap face than the system sans that was
   actually painting when these rules said "Ubuntu" (Ubuntu never
   loads - document.fonts reports it unloaded). So switching to the
   authentic face pushed several labels past their PINNED widths:

     span "Traducir"        56px inside a 50px .nitro-purse__btn
     "Hazte socio"          truncated to "Hazte ..." in a 101px button
     span.friend-bar-text   truncated to "Find ne..." in a 127px chip
     span.room-tool-label   104px + 30px indent inside a 126px row
     .nitro-purse-button__amount  "18.4k" clipped in a 25px box

   The fix is to drop to Volter's NATIVE 9px rather than widen the
   parents: the bundle pins these widths with !important and derives
   the flex row from them, so widening makes an element paint over
   its neighbour instead of reflowing.
   ========================================================= */

html body #root .nitro-purse-container .nitro-purse-button__amount,
html body #root .nitro-purse-container .currency-text,
html body #root .nitro-purse-container .seasonal-amount,
html body #root .nitro-purse-container .seasonal-text {
    font-size: 9px !important;
    line-height: 12px !important;
    letter-spacing: 0 !important;
}

html body #root .nitro-purse-container .nitro-purse__btn,
html body #root .nitro-purse-container .nitro-purse__btn span,
html body #root .nitro-purse-container .club-text,
html body #root .nitro-purse-container .club-text span,
html body #root .nitro-purse-container .nitro-purse-right-button,
html body #root .nitro-purse-container .nitro-purse-right-button span {
    font-size: 9px !important;
    line-height: 12px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

html body #root .nitro-purse-container .nitro-purse-menu__item,
html body #root .nitro-purse-container .nitro-purse-menu__item span {
    font-size: 9px !important;
    line-height: 13px !important;
}


/* == AGENT3-FIT2 =============================================
   MEASURED after dropping to 9px Volter:
     button .nitro-purse__btn--translate  box 50px, padding 0 6px
       -> span content box 36px, scrollWidth 50px  ("Tra...")
     button .nitro-purse__btn--help       span 35px / 35px  (fits)
   The 50px button width is pinned by the bundle and the purse column
   already ends 4px past the viewport edge, so the button cannot be
   widened. Reclaiming the 6px side padding plus a half-pixel of
   tracking gives 46px of content box, which is what "Traducir" needs.
   ========================================================= */

html body #root .nitro-purse-container .nitro-purse__btn--translate,
html body #root .nitro-purse-container .nitro-purse__btn--help,
html body #root .nitro-purse-container .nitro-purse__btn--join,
html body #root .nitro-purse-container .nitro-purse__btn--earnings {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

html body #root .nitro-purse-container .nitro-purse__btn--translate span,
html body #root .nitro-purse-container .nitro-purse__btn--help span,
html body #root .nitro-purse-container .nitro-purse__btn--join span,
html body #root .nitro-purse-container .nitro-purse__btn--earnings span {
    letter-spacing: -0.5px !important;
    text-align: center !important;
    width: 100% !important;
}


/* == AGENT3-FIT3 =============================================
   The 10px rule earlier in THIS FILE (section "2011 printed every
   purse number in flat white") scores (0,5,1) and was beating the
   AGENT3-FIT block's (0,4,1). Re-stating it at matching depth is the
   documented way to win here - see the CASCADE note in
   2011-windows.css. Measured: "18.4k" needs 31px at 10px Volter in a
   25px content box; 9px plus reclaimed pill padding brings it in.
   ========================================================= */

html body #root .nitro-purse-container .nitro-purse .nitro-purse-button .nitro-purse-button__amount,
html body #root .nitro-purse-container .nitro-purse .nitro-purse-button .currency-text {
    font-size: 9px !important;
    line-height: 12px !important;
    letter-spacing: -0.5px !important;
}

html body #root .nitro-purse-container .nitro-purse .nitro-purse-button {
    padding-left: 3px !important;
    padding-right: 2px !important;
}


/* == AGENT3-FIT4 =============================================
   padding-right:2px in FIT3 pulled the currency glyph onto the pill's
   gold rim; the amount now fits on tracking alone, so the right pad
   goes back to 4px. "Traducir" is the one label that still cannot
   make its pinned 50px button - a further -1px of tracking clears it.
   ========================================================= */

html body #root .nitro-purse-container .nitro-purse .nitro-purse-button {
    padding-right: 4px !important;
}

html body #root .nitro-purse-container .nitro-purse__btn--translate span {
    letter-spacing: -1px !important;
}