/* Adapted from current src/rml_backend.cpp RCSS, 2026-10-21. */

/* RmlUi has no HTML UA stylesheet: every structural element needs an explicit
   display, or it defaults to inline and the layout collapses. */
body { font-family: "Inter"; font-size: 14px; color: #f4ebde; }
#win { display: block; position: absolute; left: 44px; top: 70px; width: 772px;
       background-color: #0c0b0f; border: 1px solid #68404d; border-radius: 10px; }
/* header */
#hdr { display: block; position: relative; height: 100px;
       background-color: #140d13; border-bottom: 1px solid #4b1d2a;
       background-image: linear-gradient(135deg, #1d0e16, #100d12 45%, #140d13); }
/* Fanned playing cards — vector only (no glyph or texture dependency), matching
   nanohana_theme.hpp. Decorative: the header has no interactive elements. */
#cards { display: block; position: absolute; right: 14px; top: 16px; width: 196px; height: 70px; }
.card { display: block; position: absolute; top: 2px; width: 46px; height: 62px;
        background-color: #1a1319; border: 1px solid #5f313e; border-radius: 4px; }
.card .inner { display: block; position: absolute; left: 5px; top: 7px; width: 34px; height: 46px;
               border: 1px solid #482831; border-radius: 2px; }
.c1 { right: 108px; transform: rotate(-14deg); }
.c2 { right: 74px; transform: rotate(-5deg); }
.c3 { right: 40px; transform: rotate(4deg); }
.c4 { right: 6px; transform: rotate(13deg); }
.sq { display: block; position: absolute; transform: rotate(45deg); }
.bl { display: block; position: absolute; border-radius: 5px; }
.st { display: block; position: absolute; }
.red { background-color: #992f43; }
.blk { background-color: #816d6d; }
.h1 { left: 11px; top: 23px; width: 12px; height: 12px; }
.h2 { left: 23px; top: 23px; width: 12px; height: 12px; }
.h3 { left: 15px; top: 26px; width: 16px; height: 16px; }
.d1 { left: 15px; top: 23px; width: 16px; height: 16px; }
.s1 { left: 15px; top: 19px; width: 16px; height: 16px; }
.s2 { left: 11px; top: 28px; width: 12px; height: 12px; }
.s3 { left: 23px; top: 28px; width: 12px; height: 12px; }
.s4 { left: 21px; top: 35px; width: 4px; height: 11px; }
.k1 { left: 17px; top: 18px; width: 12px; height: 12px; }
.k2 { left: 11px; top: 27px; width: 12px; height: 12px; }
.k3 { left: 23px; top: 27px; width: 12px; height: 12px; }
.k4 { left: 21px; top: 33px; width: 4px; height: 13px; }
#tick { display: block; position: absolute; left: 14px; top: 24px; width: 3px; height: 28px;
        background-color: #bd2943; border-radius: 1px; }
#suite { display: block; position: absolute; left: 29px; top: 9px; font-size: 9px; letter-spacing: 2px; color: #b18b90; }
#title { display: block; position: absolute; left: 26px; top: 18px; font-size: 30px; font-weight: bold; color: #f4ebde; }
#owner { display: block; position: absolute; left: 29px; top: 58px; font-size: 10px; letter-spacing: 1px; color: #b18b90; }
#oname { display: block; position: absolute; left: 76px; top: 57px; font-size: 12px; color: #eadacb; }
/* Contact row: the feed line's own column and metrics, one line below it. Its
   marker does not breathe - the live one above is the status light. */
#contactdot { display: block; position: absolute; left: 30px; top: 91px; width: 6px; height: 6px;
              background-color: #ca3f57; border-radius: 2px; }
#contact { display: block; position: absolute; left: 40px; top: 88px; font-size: 9px;
           letter-spacing: 1px; color: #cbb8b6; }
#dot { display: block; position: absolute; left: 30px; top: 80px; width: 6px; height: 6px; background-color: #ca3f57; border-radius: 2px; }
#feed { display: block; position: absolute; left: 40px; top: 77px; font-size: 9px; letter-spacing: 1px; color: #eadacb; }
#accent { display: block; position: absolute; left: 0; bottom: 0; width: 52%; height: 2px; background-color: #ba253f; }
/* body split */
#bodyrow { display: flex; flex-direction: row; padding: 16px; }
#nav { display: block; position: relative; flex: 0 0 auto; width: 154px; background-color: #110f14;
       border: 1px solid #43272f; border-radius: 6px; padding: 14px 10px; overflow: hidden; }
#nav p.lbl { display: block; font-size: 10px; letter-spacing: 2px; color: #a29494; padding: 2px 6px 10px 6px; }
/* border-box so width:100% includes the padding — RmlUi defaults to content-box,
   which made the rows overflow the nav. line-height centres the label vertically. */
#nav button { box-sizing: border-box; display: block; position: relative; width: 100%; height: 36px;
    line-height: 36px; margin-bottom: 4px; padding: 0 12px; background-color: transparent;
    border-width: 0; border-radius: 4px;
    color: #cbb8b6; font-size: 14px; font-weight: 500; text-align: left; }
#nav button:hover { background-color: #641c2c; color: #f4ebde; }
#nav button.sel { background-color: #441724; color: #f4ebde; }
/* the mockup's .sel::before crimson marker (RmlUi has no pseudo-elements) */
#nav button .navbar { display: none; }
#nav button.sel .navbar { display: block; position: absolute; left: 3px; top: 8px;
    width: 2px; height: 20px; background-color: #e25369; border-radius: 1px; }
/* Definite width: RmlUi only stretches width:auto children under a definite
   parent, so a flex-grown (indefinite) width collapses the panel contents to 0. */
#panel { display: block; flex: 0 0 auto; width: 512px; margin-left: 14px; background-color: #110f14;
         border: 1px solid #43272f; border-radius: 6px; padding: 16px 18px; height: 366px; overflow-y: auto; }
/* Definite px width: % and auto both resolve to 0 inside a RmlUi scroll
   container, so the page is pinned to the panel content minus the scrollbar. */
.page { display: block; width: 494px; }
#panel h2 { display: block; font-size: 16px; font-weight: bold; color: #f0c6b1; margin-bottom: 6px; }
.rule { display: block; height: 1px; background-color: #43272f; margin: 10px 0 14px 0; }
.row { display: flex; flex-direction: row; margin: 6px 0; }
.half { display: block; width: 50%; }
.note { display: block; font-size: 11px; color: #a29494; margin: 10px 0; }
/* controls */
.chk { display: block; margin: 7px 0; padding: 3px 0; border-radius: 4px; }
.chk:hover { background-color: #211820; }
.chk input.checkbox { display: inline-block; width: 16px; height: 16px; margin-right: 10px;
    vertical-align: middle; background-color: #1e181f; border: 1px solid #43272f; border-radius: 4px; }
.chk input.checkbox:hover { border-color: #ae2f45; }
.chk input.checkbox:checked { background-color: #d2455e; border-color: #f27682; }
.sl { display: block; margin: 12px 0; }
/* name left, value pushed to the right edge (mockup's sl-top row) */
.sl .lab { display: flex; flex-direction: row; font-size: 13px; margin-bottom: 6px; }
/* Bare text must not sit directly in a flex container: RmlUi makes every child
   its own flex item and block-formats it, and a text node formatted as a block
   has no inline content, so the name (and any unit suffix) silently vanished.
   Both halves live in their own element; explicit display, no UA stylesheet. */
.sl .lab span.n { display: block; }
.sl .lab span.v { display: block; margin-left: auto; color: #f0c6b1; }
/* Range inputs: the draggable thumb is <sliderbar> (not <sliderarrow>). With no
   UA stylesheet it has no width, fills the track and pins the value at max. */
input.range { display: block; width: 300px; height: 18px; }
input.range slidertrack { height: 18px; background-color: #1e181f; border: 1px solid #43272f; border-radius: 3px; }
input.range sliderprogress { height: 18px; background-color: #6f2233; border-radius: 3px; }
input.range sliderbar { width: 14px; height: 18px; background-color: #d2455e; border-radius: 3px; }
input.range sliderbar:hover { background-color: #f27682; }
input.range sliderbar:active { background-color: #f27682; }
input.range sliderarrowdec, input.range sliderarrowinc { display: none; }
/* colour rows: swatch / name / hex, clicking opens an inline R-G-B picker */
.col { display: flex; flex-direction: row; align-items: center; margin: 5px 0;
       padding: 4px 5px; border-radius: 4px; }
.col:hover { background-color: #1b141d; }
.sw { display: block; width: 30px; height: 18px; margin-right: 10px; border: 1px solid #5f313e; border-radius: 3px; }
.col .cname { display: block; flex: 1 1 auto; font-size: 13px; }
.col .hex { display: block; width: 76px; font-size: 11px; color: #a29494; text-align: right; }
.picker { display: block; width: 462px; margin: 2px 0 10px 2px; padding: 9px 11px;
          background-color: #171217; border: 1px solid #6f3141; border-radius: 4px; }
.prow { display: flex; flex-direction: row; align-items: center; margin: 6px 0; }
.prow .pch { display: block; width: 18px; font-size: 12px; color: #f0c6b1; }
.prow input.range { display: block; width: 404px; height: 18px; }
/* custom dropdowns (RmlUi <select> popups are unreliable over a composited overlay) */
.combo { display: block; margin: 10px 0; }
.combo .lab { display: block; font-size: 13px; margin-bottom: 6px; }
.cbox { display: flex; flex-direction: row; align-items: center; width: 320px; height: 28px;
        background-color: #1e181f; border: 1px solid #43272f; border-radius: 4px; padding: 0 10px; }
.cbox:hover { border-color: #ae2f45; }
.cbox .cval { display: block; flex: 1 1 auto; font-size: 13px; color: #f4ebde; }
.cbox .caret { display: block; width: 5px; height: 5px; font-size: 0;
    border-right: 2px solid #f0c6b1; border-bottom: 2px solid #f0c6b1;
    transform: rotate(45deg); margin-right: 3px; margin-top: -3px; }
.clist { display: block; width: 320px; margin-top: 3px; padding: 3px;
         background-color: #171217; border: 1px solid #6f3141; border-radius: 4px; }
.copt { display: block; padding: 6px 9px; border-radius: 3px; color: #cbb8b6; font-size: 13px; }
.copt:hover { background-color: #641c2c; color: #f4ebde; }
.copt.on { color: #f0c6b1; }
/* tick stepper */
.tick { display: flex; flex-direction: row; margin: 8px 0; }
.tick .tlab { display: block; flex: 1 1 auto; font-size: 13px; }
.tbtn { display: block; width: 28px; height: 24px; margin-left: 6px; background-color: #2f1620;
        border: 1px solid #43272f; border-radius: 4px; color: #f4ebde; font-size: 15px; text-align: center; }
.tbtn:hover { background-color: #5e1b2b; }
.tval { display: block; width: 44px; height: 24px; margin-left: 6px; text-align: center; color: #f0c6b1; font-size: 14px; }
/* status read-out */
.stat { display: block; white-space: pre-wrap; font-size: 12px; color: #cbb8b6; margin: 8px 0; }
/* Scrollbars. RmlUi ships no UA stylesheet, so an unstyled scrollbar has no
   width, expands over the whole scroll container and swallows every click. */
scrollbarvertical { width: 11px; }
scrollbarvertical slidertrack { background-color: #0c0b0f; border-radius: 4px; }
scrollbarvertical sliderbar { width: 11px; min-height: 36px; background-color: #492d36; border-radius: 4px; }
scrollbarvertical sliderbar:hover { background-color: #703141; }
scrollbarvertical sliderbar:active { background-color: #a42c43; }
scrollbarvertical sliderarrowdec, scrollbarvertical sliderarrowinc { display: none; }
scrollbarhorizontal { height: 11px; }
scrollbarhorizontal slidertrack { background-color: #0c0b0f; border-radius: 4px; }
scrollbarhorizontal sliderbar { height: 11px; min-width: 36px; background-color: #492d36; border-radius: 4px; }
scrollbarhorizontal sliderarrowdec, scrollbarhorizontal sliderarrowinc { display: none; }
/* footer */
/* Shared button. Must be class-based: an id-scoped rule left in-panel buttons
   unstyled (inline, no box) because RmlUi has no UA stylesheet. */
.btn { display: block; height: 34px; line-height: 34px; padding: 0 16px; background-color: #2f1620;
       border: 1px solid #43272f; border-radius: 4px; color: #f4ebde; font-size: 13px; font-weight: bold;
       text-align: center; }
.btn:hover { background-color: #5e1b2b; }
.btn.sm { height: 28px; line-height: 28px; font-size: 12px; padding: 0 12px; }
.row .btn.sm { margin-right: 8px; }
#foot { display: flex; flex-direction: row; border-top: 1px solid #43272f; margin: 0 16px; padding-top: 14px; }
#foot .btn { margin-right: 10px; }
#meta { display: block; margin: 4px 16px 13px 16px; font-size: 9px;
        letter-spacing: 1px; color: #6f6368; }
/* Short, interruptible feedback. Transforms never move layout boxes. */
#nav button, .btn, .tbtn, .copt, .col, .chk {
    transition: background-color 0.14s, color 0.14s, transform 0.14s;
}
.cbox, .chk input.checkbox { transition: border-color 0.14s, background-color 0.14s; }
#nav button:hover { transform: translateX(3px); }
#nav button:active, .btn:active, .tbtn:active { transform: translateY(1px); }
#nav button:focus, .btn:focus, .tbtn:focus, .cbox:focus { background-color: #641c2c; }
#nav button.sel { background-image: linear-gradient(90deg, #5c2032, #29151e); }
#navhint { display: block; position: absolute; bottom: 16px; left: 16px;
    font-size: 10px; line-height: 18px; color: #a29494; }
#navhint b { color: #eadacb; }
.description { display: block; font-size: 11px; line-height: 17px; color: #b3a1a6; margin-bottom: 8px; }
.btn.primary { background-color: #a82e49; border-color: #d3546d; }
.btn.primary:hover { background-color: #c23d59; }
#meta { color: #ac969e; }
.sl .lab span.v { background-color: #2c1922; padding: 1px 6px; border-radius: 3px; }
input.range sliderbar { transition: background-color 0.12s; }
#cards { animation: card-drift 6s ease-in-out infinite alternate; pointer-events: none; }
#dot { animation: signal-breathe 2.4s ease-in-out infinite alternate; }
#accent { animation: accent-breathe 6s ease-in-out infinite alternate; }
@keyframes card-drift {
    from { transform: translateY(-2px) rotate(-1deg); }
    to { transform: translateY(2px) rotate(1deg); }
}
@keyframes signal-breathe {
    from { opacity: 0.55; } to { opacity: 1; }
}
@keyframes accent-breathe {
    from { width: 38%; opacity: 0.6; } to { width: 68%; opacity: 1; }
}
/* --- table dressing --------------------------------------------------------
   Vector only: no images, no filters, nothing that breaks the premultiplied
   composite. All of it animates only while the menu document is visible, and
   the menu is paced at 60 Hz. */
/* Roulette ring behind the fanned cards. */
#roulette { display: block; position: absolute; right: 6px; top: 4px; width: 96px; height: 96px;
            border-radius: 48px; opacity: 0.24; pointer-events: none;
            background-image: repeating-conic-gradient(#120f14 0deg, #120f14 18deg, #8e1a2c 18deg, #8e1a2c 36deg);
            /* RCSS has no bare "linear" tween - only linear-in/-out/-in-out.
               An unknown keyword makes the whole shorthand invalid and the
               animation silently never starts. */
            animation: wheel-spin 14s linear infinite; }
@keyframes wheel-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* Gambling eye: the pupil blooms only while aim and trigger are both armed. */
#eye { display: block; position: absolute; left: 196px; top: 60px; width: 26px; height: 14px;
       background-color: #1b1116; border: 1px solid #5f313e; border-radius: 13px; }
#pupil { display: block; position: absolute; left: 9px; top: 3px; width: 8px; height: 8px;
         border-radius: 4px; background-color: #6f2233; }
#eye.armed #pupil { animation: pupil-bloom 1.6s ease-in-out infinite alternate; }
@keyframes pupil-bloom {
    from { transform: scale(0.72); background-color: #8e1a2c; }
    to { transform: scale(1.25); background-color: #ff4f6d; }
}
#armed { display: none; position: absolute; left: 228px; top: 62px; font-size: 8px;
         letter-spacing: 1px; color: #f27682; }
#armed.on { display: block; }
/* Card-back weave drifting under the navigation, clipped by the nav box. */
#weave { display: block; position: absolute; left: -40px; top: -40px; width: 260px; height: 520px;
         opacity: 0.10; pointer-events: none;
         background-image: repeating-linear-gradient(45deg, #ba253f 0%, #ba253f 6%, transparent 6%, transparent 12%);
         animation: weave-drift 9s linear infinite; }
@keyframes weave-drift { from { transform: translate(0px, 0px); } to { transform: translate(34px, 34px); } }
/* Suit pips drifting behind the settings page. */
.pip { display: block; position: absolute; width: 14px; height: 14px; opacity: 0.07;
       background-color: #ba253f; pointer-events: none; }
.p1 { left: 60px; top: 90px; animation: pip-float 11s 0s ease-in-out infinite alternate; }
.p2 { left: 330px; top: 170px; animation: pip-float 13s 1.5s ease-in-out infinite alternate; }
.p3 { left: 180px; top: 280px; animation: pip-float 9s 3s ease-in-out infinite alternate; }
@keyframes pip-float {
    from { transform: translateY(-10px) rotate(40deg); }
    to { transform: translateY(10px) rotate(50deg); }
}
/* Every toggle turns over like a chip. */
.chk input.checkbox:checked { animation: chip-flip 0.34s cubic-bezier(.2,.8,.25,1.2) 1; }
@keyframes chip-flip {
    from { transform: scaleX(1); }
    45% { transform: scaleX(0.05); }
    to { transform: scaleX(1); }
}
/* Pages are dealt off the deck; the data-if swap recreates the element. */
.page { animation: deal-in 0.28s cubic-bezier(.2,.8,.25,1.2) 1; }
@keyframes deal-in {
    from { opacity: 0; transform: translate(26px, -14px) rotate(3deg) scale(0.97); }
    to { opacity: 1; transform: translate(0px, 0px) rotate(0deg) scale(1); }
}
/* Pledge stamp: driven by the stamping flag the save action raises. */
#stamp { display: block; position: absolute; right: 26px; bottom: 54px; width: 96px; height: 34px;
         line-height: 34px; text-align: center; font-size: 15px; font-weight: bold; letter-spacing: 1px;
         color: #f4ebde; background-color: #a4122c; border: 2px solid #e2516a; border-radius: 4px;
         opacity: 0; pointer-events: none; }
#stamp.hit { animation: stamp-slam 0.75s cubic-bezier(.2,.8,.25,1.2) 1; }
@keyframes stamp-slam {
    0% { opacity: 0; transform: scale(2.6) rotate(-14deg); }
    22% { opacity: 1; transform: scale(1) rotate(-8deg); }
    70% { opacity: 1; transform: scale(1) rotate(-8deg); }
    to { opacity: 0; transform: scale(1.06) rotate(-8deg); }
}