/*
 * The horse windows (dealer and saddler): the look of the house and bank windows, a green ornamental frame, a ribbon for the name, parchment with ink lines.
 * Pictures: frame-band.png (9-slice atlas), ribbon.png (3-slice). Fonts: fonts/ (OFL, see fonts/README.txt).
 * The first part is the shared kit, the second part the changes that make the look of these windows.
 */

/*
 * KLRP UI kit: a slate-and-gold frame, a red title ribbon with a crest, parchment cards, jewelled buttons.
 * Pieces: frame.png (9-slice), ribbon.png (3-slice). The fonts are in fonts/.
 * Usage:
 *   <div class="kl-panel">
 *     <div class="kl-title"><h1>Title</h1></div>
 *     <div class="kl-body"> <section class="kl-card"><h2>Heading</h2> ... </section> </div>
 *     <div class="kl-foot"><button class="kl-btn kl-red">Schließen</button></div>
 *   </div>
 */

:root {
    --kl-slate: #2c4764;
    --kl-gold: #c9a24a;
    --kl-gold-bright: #f1d98b;
    --kl-gold-dim: #7a5a1e;
    --kl-parchment: #e6d6ae;
    --kl-parchment-2: #d8c496;
    --kl-ink: #2a1c10;
    --kl-ink-soft: #5b4630;
    --kl-ink-faint: #8a7356;
    --kl-ruby: #8a2219;
    --kl-serif: "MedievalSharp", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}

/* MedievalSharp (Latin and Latin Extended), Google Fonts, SIL Open Font License 1.1 */
@font-face {
    font-family: "MedievalSharp";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/MedievalSharp-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "MedievalSharp";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/MedievalSharp-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Manufacturing Consent";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ManufacturingConsent-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Manufacturing Consent";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ManufacturingConsent-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- the panel: slate frame, parchment inside ---------- */

.kl-panel {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border: 29px solid transparent;
    border-image: url("frame.png") 240 / 60px / 0 round;
    border-radius: 6px;
    padding: 46px 8px 4px;
    color: var(--kl-ink);
    font-family: var(--kl-serif);
    background-color: var(--kl-parchment);
    background-image:
        radial-gradient(ellipse at 50% 30%, rgba(255,250,235,0.65), transparent 70%),
        radial-gradient(ellipse at 0% 0%, rgba(120,84,40,0.26), transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(120,84,40,0.32), transparent 45%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.24  0 0 0 0 0.12  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
        linear-gradient(180deg, var(--kl-parchment), var(--kl-parchment-2));
    box-shadow: 0 10px 22px rgba(0,0,0,0.55);
}

/* the parchment is lit from the middle and darkens towards the frame */
.kl-panel::before {
    content: "";
    position: absolute;
    inset: -2px;
    box-shadow: inset 0 0 34px rgba(95,62,25,0.5);
    pointer-events: none;
}

/* ---------- title ribbon and crest, sitting on the top edge of the frame ---------- */

.kl-title {
    position: absolute;
    left: 50%;
    top: -64px;
    transform: translateX(-50%);
    box-sizing: border-box;
    min-width: 280px;
    max-width: 112%;
    height: 64px;
    border-style: solid;
    border-width: 0 80px;
    border-image: none;
    text-align: center;
    white-space: nowrap;
}

.kl-title h1 {
    margin: 0;
    padding: 2px 0 0;
    line-height: 56px;
    font-family: "Manufacturing Consent", var(--kl-serif);
    font-size: 34px;
    font-weight: normal;
    letter-spacing: 0.04em;
    color: #f8ebc8;
    text-shadow: 0 2px 2px rgba(20,4,2,0.85), 0 0 10px rgba(255,214,150,0.25);
}

/* ---------- content: cards ---------- */

.kl-body {
    position: relative;
    padding: 6px 14px 6px;
}

.kl-card {
    position: relative;
    margin: 0 0 12px;
    padding: 10px 14px 12px;
    border: 1px solid rgba(122,90,30,0.55);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(255,248,228,0.55), rgba(240,224,184,0.35));
    box-shadow: inset 0 0 0 1px rgba(255,250,235,0.55), inset 0 -8px 14px rgba(120,84,40,0.12), 0 1px 3px rgba(60,38,12,0.3);
}

.kl-card h2 {
    margin: 0 0 8px;
    padding-bottom: 3px;
    font-size: 16px;
    font-weight: normal;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    color: var(--kl-slate);
    border-bottom: 1px solid rgba(122,90,30,0.5);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.kl-card h2 small {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--kl-ink-faint);
}

.kl-note {
    margin: 0 0 12px;
    padding: 8px 12px;
    font-size: 14px;
    font-style: italic;
    color: var(--kl-ruby);
    border-left: 3px solid var(--kl-ruby);
    background: rgba(124,29,23,0.07);
    border-radius: 0 6px 6px 0;
}

.kl-hint {
    margin: 0 0 8px;
    font-size: 13px;
    font-style: italic;
    color: var(--kl-ink-faint);
}

/* ---------- ledger line, field, list ---------- */

.kl-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
}

.kl-line span {
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    color: var(--kl-ink-soft);
}

.kl-line i {
    flex: 1;
    min-width: 12px;
}

.kl-line strong {
    font-size: 26px;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
}

.kl-line.main strong {
    font-size: 30px;
    color: var(--kl-ruby);
}

.kl-field {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: 1px solid rgba(122,90,30,0.6);
    border-bottom-color: var(--kl-ink-soft);
    border-radius: 5px;
    background: rgba(255,250,236,0.55);
    box-shadow: inset 0 2px 4px rgba(90,60,20,0.18);
    color: var(--kl-ink);
    font-family: var(--kl-serif);
    font-size: 17px;
    outline: none;
}

.kl-field:focus {
    border-color: var(--kl-gold-dim);
    background: rgba(255,252,242,0.85);
}

.kl-field::placeholder {
    color: var(--kl-ink-faint);
    font-style: italic;
}

.kl-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kl-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 2px;
    font-size: 14px;
    border-bottom: 1px dotted rgba(91,70,48,0.55);
}

.kl-list li:last-child {
    border-bottom: none;
}

.kl-list .when {
    color: var(--kl-ruby);
    font-variant-numeric: tabular-nums;
}

/* ---------- buttons: a jewel in a gold setting ---------- */

.kl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.kl-btn {
    --top: #4a5a72;
    --mid: #34425a;
    --bot: #1f2a3c;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #1a1108;
    border-radius: 9px;
    background: linear-gradient(180deg, var(--top), var(--mid) 52%, var(--bot));
    color: #f8ebc8;
    font-family: var(--kl-serif);
    font-size: 15px;
    letter-spacing: 0.14em;
    font-variant: small-caps;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -3px 5px rgba(0,0,0,0.35),
        0 0 0 2px #1a1108,
        0 0 0 3px var(--kl-gold),
        0 4px 6px rgba(30,16,4,0.45);
}

.kl-btn::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 3px;
    height: 42%;
    border-radius: 6px 6px 14px 14px / 6px 6px 8px 8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.04));
    pointer-events: none;
}

.kl-btn:hover {
    filter: brightness(1.14);
}

.kl-btn:active {
    transform: translateY(1px);
}

.kl-btn:focus {
    outline: none;
}

.kl-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.kl-green { --top: #4aa05a; --mid: #2b7a3b; --bot: #15501f; }
.kl-red   { --top: #c4453a; --mid: #8f2219; --bot: #571009; }
.kl-gold  { --top: #e2bb5a; --mid: #b2862c; --bot: #7a5516; color: #1a0f03; text-shadow: 0 1px 0 rgba(255,244,200,0.75); }

.kl-btn.kl-wide {
    margin-top: 10px;
}

/* ---------- foot ---------- */

.kl-foot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 40px 20px;
}

.kl-foot .kl-btn {
    width: 60%;
}

.kl-keys {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--kl-ink-faint);
}

.kl-keys b {
    font-weight: normal;
    color: var(--kl-ink-soft);
    border: 1px solid rgba(122,90,30,0.55);
    border-radius: 3px;
    padding: 0 4px;
    margin: 0 2px;
}

/* ---------- look of this window ---------- */

  /* the window has no background of its own: the game shows through around the frame */
  html, body { margin: 0; background: transparent; }
  #root { box-sizing: border-box; width: 580px; padding: 28px 50px; background: transparent; }

  /* frame from the supplied picture */
  .kl-panel {
    border-width: 42px 40px;
    border-image: url("frame-band.png") 170 / 85px / 0 round;
    border-radius: 0;
    padding: 20px 14px 4px;
    /* the frame's own ground lies under the whole border box: where the border image is scaled by a fraction its cells
       leave hairline gaps and half-transparent edge pixels, and those must show the frame's colour, not the game */
    background-color: #e4d6b6;
    background-image:
      radial-gradient(ellipse at 50% 35%, rgba(255,240,208,0.3), transparent 72%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.28  0 0 0 0 0.1  0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
      linear-gradient(180deg, #e9dcc0, #d9c9a5),
      linear-gradient(#e4d6b6, #e4d6b6);
    background-clip: padding-box, padding-box, padding-box, border-box;
    box-shadow: inset 0 0 0 2px rgba(163,153,85,0.75), inset 0 0 30px rgba(120,90,40,0.18), 0 10px 22px rgba(0,0,0,0.55);
  }
  .kl-panel::before { display: none; }

  /* title: ink on the parchment, with a fine rule */
  .kl-title { position: static; transform: none; height: auto; border: 0; border-image: none; min-width: 0; max-width: none; padding: 6px 0 4px; text-align: center; }
  .kl-title h1 { line-height: 1.15; font-size: 42px; color: #2a1c10; text-shadow: 0 1px 0 rgba(255,238,200,0.7); }
  .kl-rule { height: 14px; margin: 4px 22px 6px; background:
      linear-gradient(90deg, transparent, rgba(91,70,48,0.7) 18%, rgba(91,70,48,0.7) 44%, transparent 44.5%, transparent 55.5%, rgba(91,70,48,0.7) 56%, rgba(91,70,48,0.7) 82%, transparent) center/100% 1px no-repeat; position: relative; }
  .kl-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; background: #7c1d17; transform: translate(-50%,-50%) rotate(45deg); }

  /* matte: no cards, no gloss */
  .kl-card { background: none; border: 0; box-shadow: none; padding: 6px 4px 8px; margin: 0 0 6px; border-radius: 0; }
  .kl-card h2 { color: #7c1d17; border-bottom: 1px solid rgba(91,70,48,0.6); }
  .kl-body { padding: 0 20px; }
  .kl-field { background: transparent; box-shadow: none; border: 0; border-bottom: 1.5px solid #5b4630; border-radius: 0; padding: 0 4px; }
  /* buttons: flat and matt like the frame - the olive line and the pale inner band of the frame, teal as the ground, sunflower yellow for
     the main action (kl-gold), terracotta (the blossom) for closing (kl-red) */
  .kl-btn, .kl-btn.kl-green, .kl-btn.kl-red, .kl-btn.kl-gold {
    --top: #93c3b0; --mid: #85b6a3; --bot: #72a38f;
    height: 40px; border: 1px solid #a39955; border-radius: 4px; color: #26301f;
    background: linear-gradient(180deg, var(--top), var(--bot));
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: inset 0 0 0 2px #ede7a6, 0 2px 3px rgba(70,60,25,0.38);
  }
  .kl-btn::after { display: none; }
  .kl-btn.kl-gold { --top: #fbd36f; --bot: #eab346; }
  .kl-btn.kl-red { --top: #f0b39a; --bot: #de8c70; }
  .kl-btn:hover { filter: brightness(1.07); }
  .kl-foot { padding: 4px 30px 18px; }
  .kl-foot .kl-btn { width: 100%; }
  .kl-note { background: rgba(124,29,23,0.07); }

  /* title ribbon from the supplied picture, straddling the top edge of the frame */
  .kl-panel { padding-top: 90px; }
  .kl-rule { display: none; }
  .kl-title {
    position: absolute; left: 50%; top: 13px; transform: translateX(-50%);
    box-sizing: border-box; width: max-content; min-width: 0; max-width: none; height: 80px;
    border-style: solid; border-width: 0 125px;
    border-image: url("ribbon.png") 0 230 0 230 fill / 0 125px stretch;
    padding: 11px 2px 0; text-align: center; white-space: nowrap;
  }
  .kl-title h1 { font-size: 39px; line-height: 40px; padding: 0; color: #24160b; text-shadow: 0 1px 0 rgba(255,240,205,0.6); }

/* ---------- the horse windows ---------- */

html, body { overflow: hidden; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
#root { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
button:focus { outline: none; }

.kl-note[hidden] { display: none; }
.kl-field { user-select: text; -webkit-user-select: text; }
select.kl-field { padding-right: 6px; }

/* MedievalSharp only comes in one weight; a hair of outline makes it read a little heavier (not the ribbon title). */
.kl-panel { -webkit-text-stroke: 0.4px currentColor; }
.kl-title h1 { -webkit-text-stroke: 0; }

/* a choice with arrows: the leather round buttons of the house window's chips */
.stepper { display: flex; align-items: center; gap: 10px; }

.arrow {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #1c130b;
    border-radius: 50%;
    background: linear-gradient(180deg, #4a3322, #2b1d12);
    color: #f1e3c0;
    font-family: var(--kl-serif);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px #3a281a, inset 0 0 0 3px rgba(241,227,192,0.28), 0 2px 3px rgba(40,20,5,0.4);
    -webkit-text-stroke: 0;
}
.arrow:hover { filter: brightness(1.18); }
.arrow:active { transform: translateY(1px); }
/* triangles look centred only with a nudge */
.arrow.left { padding-right: 3px; }
.arrow.right { padding-left: 3px; }

.value {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 8px;
    line-height: 36px;
    text-align: center;
    font-size: 19px;
    color: var(--kl-ink);
    border-bottom: 1.5px solid #5b4630;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.value.muted { color: var(--kl-ink-faint); font-style: italic; }

/* camera: a label with its two buttons */
.camrow {
    display: grid;
    grid-template-columns: 1fr 34px 34px;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-size: 15px;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    color: var(--kl-ink-soft);
}
.camrow .arrow { width: 34px; height: 34px; }

/* the buyer's two buttons side by side: cancel, and the red one that does it */
.kl-foot .kl-row { width: 100%; margin: 4px 0 0; }
.kl-lead { margin: 4px 0 12px; text-align: center; font-size: 14px; }