/* ============================================================ THE TAVERN LOOK: FOUNDATIONS (2026-10-17, Tavern Rounds Eleven and Twelve on dev) The owner's Round Eleven picks for the foundations, controls and overlays (tools/tavern/BUILD.md, the kit in tools/tavern/round12/parts/kit.css), brought into the game for the Tavern look, everywhere at once. READ tools/tavern/FOUNDATIONS.md before building on this. palette founda / cellar the tokens below: near-black oak, smoked parchment, iron; verdigris the ONE action colour, gold money only frame founda / stone flagstones with a dark timber lintel pegged at both ends (tv/frame.png, a 9-slice border-image) plate founda / inked the head: parchment, the title inked in Cinzel, a flourish rule, the close an inked ring backdrop foundb / parch the body: smoked parchment on a paper grain, a lamp-warm centre type foundb / cinzel Cinzel for titles, headings, labels (caps .14em); Lora for every sentence and number buttons ctla / bC the stamped ledger: ink block + red wax seal, double rule, gilt, scribe's red, pencil line wtabs ctla / tA folder tabs in their own colour, washed DARK (BUILD.md rule 2) fields ctlb / c storybook boxes: ruled ink, a verdigris select button, checks and switches slider ctlb / d a thin track, verdigris fill, a round thumb slots BUILD.md rule 1 NO wooden outline anywhere: Midnight's clean well, in Tavern colours tooltip / hover / menu / toast: over / illum, banner, card, notice SCOPE: every rule here starts html[data-ui-theme="tavern"]. Tavern is the default look; Midnight, OG, Neon and Minimal never match, so they draw exactly as before (and Midnight's night pass skips any selector naming data-ui-theme, so it never twins these). Art: /v3/assets/img/glad/flat/ui/tv/. Type scale (tools/midnight/round10/TYPE.md): title 20, heading 15, label 12 caps, body 15, small 13. Never pixel fonts. */ /* ---------------------------------------------------------------- THE PALETTE (founda / cellar) ---------------------------------------------------------------- */ html[data-ui-theme="tavern"]{ /* the kit's own tokens, as in tools/tavern/round12/parts/kit.css (url()s absolute, so they work in any sheet and in an inline style) */ --tv-ink:#1a120a;--tv-ink2:#3e3020;--tv-ink3:#3e3020;--tv-label:#3f2a10; /* (2026-10-17, Round 16 sy_type "dense": every small line and label passes AA on the paper and a lit row; were #5e4c32 4.0:1 and #5a3e1a) */ --tv-paper:#c9b386;--tv-paper-hi:#dccb9f;--tv-panel:rgba(60,36,10,.09);--tv-card:#b9a273;--tv-card-lt:#d2bf94;--tv-card-line:#7e6844; --tv-line:rgba(30,18,8,.3);--tv-wash:rgba(30,18,8,.08); --tv-field:#e8dab4;--tv-fline:#3a2410;--tv-fline2:#7a5428; --tv-wood:#2a1c12;--tv-wood-dk:#070403;--tv-wood-lt:#6a6458;--tv-frame:#120c08;--tv-bar:#120c08; --tv-hud:rgba(10,7,5,.93);--tv-hud-ink:#e2cfa4;--tv-hud-ink2:#958160; --tv-head-ink:#ecd9ae;--tv-head-sub:#c2a26a; --tv-gold:#d9a440;--tv-gold-ink:#5e3a04;--tv-gold-hi:#ffcf5e;--tv-gold-txt:#ffe27a;--tv-gold-bg:#e2c47a;--tv-trim:#8a8478; --tv-act:#2f8c7d;--tv-act-hi:#4fb3a0;--tv-act-dk:#1d5e53;--tv-act-ink:#eafff9;--tv-act-soft:rgba(47,140,125,.22); --tv-good:#1f5226;--tv-good-bg:rgba(43,110,51,.17);--tv-bad:#7e1a14;--tv-bad-bg:rgba(165,42,34,.15);--tv-rare:#5e3496;--tv-rare-bg:rgba(94,52,150,.16); --tv-r-greater:#3f7fe0;--tv-r-legend:#e0a820;--tv-r-mythic:#e8433f; --tv-x:#7e261e;--tv-x-hi:#a83228;--tv-red:#a8241c; --tv-shadow:0 14px 40px rgba(0,0,0,.6);--tv-drop:drop-shadow(0 14px 24px rgba(0,0,0,.55)); --tv-ring:0 0 0 2px #8a8478,0 0 0 3.5px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.45); --tv-inset:inset 0 0 0 1.5px var(--tv-card-line),inset 0 1px 0 rgba(255,240,200,.3); --tv-r:6px; --tv-fh:"Cinzel",Georgia,"Times New Roman",serif;--tv-fb:"Lora",Georgia,serif; --tv-tx-parchment:url(/v3/assets/img/glad/flat/ui/tv/tx_parchment.png?v=1);--tv-tx-oak:url(/v3/assets/img/glad/flat/ui/tv/tx_oak.png?v=1); --tv-tx-stone:url(/v3/assets/img/glad/flat/ui/tv/tx_stone.png?v=1);--tv-tx-stone-dk:url(/v3/assets/img/glad/flat/ui/tv/tx_stone_dk.png?v=1); --tv-tx-brass:url(/v3/assets/img/glad/flat/ui/tv/tx_brass.png?v=1);--tv-tx-brass-plate:url(/v3/assets/img/glad/flat/ui/tv/tx_brass_plate.png?v=1); --tv-ground:radial-gradient(ellipse 70% 60% at 45% 35%,rgba(240,224,184,.42),transparent 75%),linear-gradient(rgba(201,179,134,.55),rgba(201,179,134,.55)),url(/v3/assets/img/glad/flat/ui/tv/tx_parchment.png?v=1) 0 0/96px 96px,#c9b386; --tv-ground-sh:inset 0 0 50px rgba(60,34,10,.3); --tv-headpaper:linear-gradient(rgba(220,203,159,.9),rgba(220,203,159,.9)),url(/v3/assets/img/glad/flat/ui/tv/tx_parchment.png?v=1) 0 0/96px 96px,#dccb9f; /* the slot well (BUILD.md rule 1): Midnight's sunken plate, in smoked parchment */ --tv-well:linear-gradient(rgba(150,120,72,.5),rgba(150,120,72,.5)),url(/v3/assets/img/glad/flat/ui/tv/tx_parchment.png?v=1) 0 0/96px 96px,#a88f60; --tv-well-line:rgba(42,26,10,.62); --tv-well-sh:inset 0 2px 4px rgba(40,24,8,.34),inset 0 -1px 0 rgba(255,240,200,.28); --tv-well-dk:linear-gradient(rgba(20,13,8,.84),rgba(20,13,8,.84)),url(/v3/assets/img/glad/flat/ui/tv/tx_oak.png?v=1) 0 0/64px 64px,#140d08; --tv-count:rgba(20,13,7,.86); /* the game's own tokens (THE EASTSCAPE UI KIT block in eastscape.html), turned to the Cellar: everything the kit draws follows */ --ink:#ecd9ae;--panel:#c9b386;--panel-ink:#1a120a;--frame:#120c08; --k-ink:#1a120a;--k-ink2:#3e3020;--k-ink3:#3e3020; --k-paper:#c9b386;--k-paper-hi:#dccb9f;--k-card:#d2bf94;--k-card-line:#7e6844;--k-line:rgba(30,18,8,.3); --k-head:#2a1c12;--k-head-ink:#ecd9ae;--k-head-sub:#c2a26a; --k-gold:#d9a440;--k-gold-ink:#5e3a04;--k-gold-hi:#ffcf5e; --k-good:#1f5226;--k-bad:#7e1a14;--k-rare:#5e3496; --k-r:6px; --k-f-label:600 12px/1.2 "Cinzel",Georgia,serif; --k-f-small:600 13px/1.3 Lora,Georgia,serif; --k-f-body:400 15px/1.4 Lora,Georgia,serif; --k-f-row:600 15px/1.2 "Cinzel",Georgia,serif; --k-f-title:600 20px/1.2 "Cinzel",Georgia,serif; --k-disp:"Cinzel",Georgia,"Times New Roman",serif; } /* ---------------------------------------------------------------- THE WINDOW: the STONE frame (founda / stone) ---------------------------------------------------------------- The frame is one 9-slice border-image (tv/frame.png): a 46px band on top (the oak lintel), 32px of wall at the sides and foot, and the lintel runs 14px past the wall at both ends. Two ways to wear it, which look the same: - EVERY WINDOW, as it is (the default): the box keeps today's 15px border, so nothing inside moves or loses room, and the stone is drawn OUTSIDE the box (border-image-outset 31 / 31 / 17 / 31). Its picture is 62px wider and 48px taller than its box. - .tv-frame (a window rebuilt to a Tavern pick): the kit's own rule, the frame INSIDE the box: border 46 / 32 / 32 / 32, so the inside is (W - 64) x (H - 78), and only the lintel's ends (14px each) hang outside. fitWin (eastscape-ui.js) reads --win-ox / --win-oy, the picture's size beyond the box, so a data-design window is scaled to fit WITH its frame. Small popups (.k-win that is not a .win, .dlg, .pop-card, .info) wear the slim frame (tv/frame_slim.png, 34 / 18 inside the box, the lintel 8px past the wall); .tv-slim gives any window the slim one. */ html[data-ui-theme="tavern"] .win{--win-ox:62;--win-oy:48;border-style:solid;border-color:transparent;border-width:15px;border-radius:0; border-image:url(/v3/assets/img/glad/flat/ui/tv/frame.png?v=1) 46 46 32 46 / 46px 46px 32px 46px / 31px 31px 17px 31px round;image-rendering:pixelated; background:var(--tv-ground);background-clip:padding-box;background-origin:padding-box;color:var(--tv-ink); box-shadow:0 0 0 19px #0e0b08;filter:var(--tv-drop)} /* the dark line round the wall (17px out): a 19px shadow under the stone shows as its last 2px */ html[data-ui-theme="tavern"] .win.tv-frame,html[data-ui-theme="tavern"] .k-win.tv-frame{--win-ox:28;--win-oy:0;border-width:46px 32px 32px;border-image-outset:0 14px;box-shadow:0 0 0 2px #0e0b08} /* a window that is not placed by hand keeps its frame on the play area: its box is held 45px in at the top and sides, 31px at the foot */ @media (min-width:821px){ html[data-ui-theme="tavern"] .game>.win:not(.tv-frame):not([data-design]):not(.ui-wmoved){max-height:calc(100% - 76px)!important;max-width:calc(100% - 90px)!important} html[data-ui-theme="tavern"] .game>.win.tv-frame:not([data-design]):not(.ui-wmoved){max-width:calc(100% - 56px)!important}} /* a phone (820px and under) has no room for the stone outside the box: every window wears the slim frame inside it (34 / 18), the lintel 8px past */ @media (max-width:820px){html[data-ui-theme="tavern"] .win,html[data-ui-theme="tavern"] .win.tv-frame{--win-ox:16;--win-oy:0;border-width:34px 18px 18px;border-image:url(/v3/assets/img/glad/flat/ui/tv/frame_slim.png?v=1) 34 26 18 26 / 34px 26px 18px 26px / 0 8px round;box-shadow:0 0 0 2px #0e0b08}} html[data-ui-theme="tavern"] :is(.k-win:not(.win),.dlg,.pop-card,.info),html[data-ui-theme="tavern"] .win.tv-slim{--win-ox:16;--win-oy:0;border-style:solid;border-color:transparent;border-width:34px 18px 18px;border-radius:0; border-image:url(/v3/assets/img/glad/flat/ui/tv/frame_slim.png?v=1) 34 26 18 26 / 34px 26px 18px 26px / 0 8px round;image-rendering:pixelated; background:var(--tv-ground);background-clip:padding-box;background-origin:padding-box;color:var(--tv-ink);box-shadow:0 0 0 2px #0e0b08;filter:var(--tv-drop)} /* (2026-10-17, rules 479, the owner: "the borders still arent thin like they used to be. just use the old border graphic for now to thin out the border of the windows in the tavern theme") THE OLD THIN FRAME, for now: every window, popup, dialogue and card wears win.png (the classic 15px wood-and-parchment 9-slice) INSIDE its box again, so nothing hangs outside it and fitWin needs no room for it (--win-ox/--win-oy 0). This comes after the stone and slim rules above (same specificity, later wins, the phone rule included), which stay for the day a thin scroll frame replaces it. */ html[data-ui-theme="tavern"] :is(.win,.win.tv-frame,.win.tv-slim,.k-win,.k-win.tv-frame,.dlg,.pop-card,.info){--win-ox:0;--win-oy:0;border-style:solid;border-color:transparent;border-width:15px;border-radius:0; border-image:url(/v3/assets/img/glad/flat/ui/win.png?v=1) 12 / 15px / 0 stretch;image-rendering:pixelated;box-shadow:none;background-clip:padding-box;background-origin:padding-box} html[data-ui-theme="tavern"] .info.k-win,html[data-ui-theme="tavern"] .info{border-width:11px;border-image-width:11px} @media (min-width:821px){ html[data-ui-theme="tavern"] .game>.win:not([data-design]):not(.ui-wmoved),html[data-ui-theme="tavern"] .game>.win.tv-frame:not([data-design]):not(.ui-wmoved){max-height:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important}} /* a window's paper, wherever the old look painted it */ html[data-ui-theme="tavern"] :is(.win-body,.k-body,.k-paper){background:var(--tv-ground);box-shadow:var(--tv-ground-sh);color:var(--tv-ink)} html[data-ui-theme="tavern"] :is(.win,.k-win)>.k-paper{box-shadow:none} /* ---------- THE HEAD: the INKED plate (founda / inked), in Cinzel ---------- */ html[data-ui-theme="tavern"] :is(.win-head,.k-head){position:relative;margin:0;min-height:56px;padding:8px 12px 14px;gap:14px;background:var(--tv-headpaper);color:var(--tv-ink); border:0;border-image:none;border-radius:0;text-shadow:none;box-shadow:none} /* the flourish rule under the title: two inked lines with a dot between them */ html[data-ui-theme="tavern"] :is(.win-head,.k-head)::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:7px;pointer-events:none; background:radial-gradient(circle,var(--tv-ink) 0 2.5px,transparent 3px) 50% 50%/14px 7px no-repeat,linear-gradient(90deg,transparent,var(--tv-ink) 8%,var(--tv-ink) 46%,transparent 46%,transparent 54%,var(--tv-ink) 54%,var(--tv-ink) 92%,transparent) 0 3px/100% 1.5px no-repeat} html[data-ui-theme="tavern"] :is(.win-head,.k-head)>b,html[data-ui-theme="tavern"] .pop-card .k-head b,html[data-ui-theme="tavern"] .dlg .k-head b{font:700 20px/1.1 var(--tv-fh);letter-spacing:.03em;color:var(--tv-ink);text-shadow:none} html[data-ui-theme="tavern"] .win-head b .topi,html[data-ui-theme="tavern"] .k-head>img,html[data-ui-theme="tavern"] .pop-card .pop-ico,html[data-ui-theme="tavern"] .pop-card .pop-ico :is(img,.ico){width:32px;height:32px;filter:sepia(.3)} html[data-ui-theme="tavern"] .win-head b .topi{margin:-6px 10px -6px 0;vertical-align:middle} html[data-ui-theme="tavern"] :is(.win-head small,.k-head .k-sub){font:600 13px/1.25 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] :is(.win-head small,.k-head .k-sub) b{font-size:15px;color:var(--tv-ink)} html[data-ui-theme="tavern"] :is(.win-head small,.k-head .k-sub) img{width:20px;height:20px} /* the close: the inked ring (tv/close.png, drawn 1:1 at 25px); red ink on hover, pressed in. The x glyph stays in the button for screen readers. */ html[data-ui-theme="tavern"] :is(.win-x,.k-x,.dlg-x),html[data-ui-theme="tavern"] .win-head .win-x{flex:none;width:30px;height:30px;padding:0;border:0;border-image:none;border-radius:50%; background:url(/v3/assets/img/glad/flat/ui/tv/close.png?v=1) 50% 50%/25px 25px no-repeat;box-shadow:none;font-size:0;color:transparent;text-shadow:none;overflow:hidden;cursor:pointer} html[data-ui-theme="tavern"] :is(.win-x,.k-x,.dlg-x):hover,html[data-ui-theme="tavern"] .win-head .win-x:hover,html[data-ui-theme="tavern"] :is(.win-x,.k-x,.dlg-x):focus-visible{ background:url(/v3/assets/img/glad/flat/ui/tv/close_hv.png?v=1) 50% 50%/25px 25px no-repeat,radial-gradient(circle,rgba(168,40,40,.18) 0 11px,transparent 11.5px)} html[data-ui-theme="tavern"] :is(.win-x,.k-x,.dlg-x):active,html[data-ui-theme="tavern"] .win-head .win-x:active{transform:scale(.92);box-shadow:none; background:url(/v3/assets/img/glad/flat/ui/tv/close_hv.png?v=1) 50% 50%/25px 25px no-repeat,radial-gradient(circle,rgba(126,26,20,.34) 0 11px,transparent 11.5px)} html[data-ui-theme="tavern"] :is(.win-x,.k-x,.dlg-x):focus-visible{outline:2px solid var(--tv-act);outline-offset:1px} /* ---------- THE FOOT ---------- */ html[data-ui-theme="tavern"] :is(.win-foot,.k-foot){border-top:2px solid var(--tv-line);background:linear-gradient(var(--tv-wash),var(--tv-wash)),var(--tv-ground);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .pop-card .pop-btns.k-foot{background:linear-gradient(var(--tv-wash),var(--tv-wash)),var(--tv-ground)} /* ---------------------------------------------------------------- TYPE (foundb / cinzel) ---------------------------------------------------------------- */ html[data-ui-theme="tavern"] :is(.k-label,.win-body h4,.cols2 h4){font:600 12px/1.2 var(--tv-fh);letter-spacing:.14em;text-transform:uppercase;color:var(--tv-label)} html[data-ui-theme="tavern"] .win-body h4 small{font:600 13px/1.2 var(--tv-fb);letter-spacing:0;text-transform:none;color:var(--tv-ink2)} html[data-ui-theme="tavern"] .k-note{font:600 13px/1.35 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .k-sect{color:var(--tv-label)}html[data-ui-theme="tavern"] .k-sect::after{background:var(--tv-line)} /* ---------------------------------------------------------------- BUTTONS: the STAMPED LEDGER (ctla / bC) ---------------------------------------------------------------- primary (.k-btn, .btn): a block of ink with a red wax seal pressed over its left end (the seal hangs 12px past the button's left edge) .sec / .plain: the double rule .gold: gilt (money) .danger: the scribe's red :disabled / .off: a faded pencil line .sm: small, no seal */ html[data-ui-theme="tavern"] :is(.k-btn,.btn){position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 10px 0 30px; border:6px solid transparent;border-radius:0;border-image:url(/v3/assets/img/glad/flat/ui/tv/plate_ink.png?v=1) 12 fill / 6px stretch;background:none;box-shadow:none;image-rendering:pixelated; color:#f6e9cc;font:italic 600 15px/1 var(--tv-fb);letter-spacing:.01em;text-shadow:none;white-space:nowrap;cursor:pointer;filter:none;transition:transform .08s,filter .08s} html[data-ui-theme="tavern"] :is(.k-btn,.btn)::before{content:"";position:absolute;left:-12px;top:50%;width:40px;height:40px;margin-top:-20px;pointer-events:none; background:url(/v3/assets/img/glad/flat/ui/tv/seal.png?v=1) 0 0/40px;image-rendering:pixelated;transform:rotate(-6deg);filter:drop-shadow(0 2px 1px rgba(0,0,0,.35));transition:transform .08s} html[data-ui-theme="tavern"] :is(.k-btn,.btn) img{width:20px;height:20px;position:relative} html[data-ui-theme="tavern"] :is(.k-btn,.btn):hover:not(:disabled),html[data-ui-theme="tavern"] :is(.k-btn,.btn):focus-visible{border-image-source:url(/v3/assets/img/glad/flat/ui/tv/plate_ink_hv.png?v=1);color:#fff6dc} html[data-ui-theme="tavern"] :is(.k-btn,.btn):hover:not(:disabled)::before{transform:rotate(-14deg) scale(1.05)} html[data-ui-theme="tavern"] :is(.k-btn,.btn):active:not(:disabled){transform:translate(1px,1px)} html[data-ui-theme="tavern"] :is(.k-btn,.btn):active:not(:disabled)::before{background-image:url(/v3/assets/img/glad/flat/ui/tv/seal_dk.png?v=1);transform:rotate(-6deg) scale(.92)} html[data-ui-theme="tavern"] :is(.k-btn,.btn):focus-visible{outline:2px solid var(--tv-act);outline-offset:2px} /* the variants take no seal */ html[data-ui-theme="tavern"] :is(.k-btn.sec,.k-btn.plain,.btn.plain,.k-btn.gold,.btn.gold,.k-btn.danger,.btn.danger,.k-btn.sm,.k-btn.noseal){padding:0 12px} html[data-ui-theme="tavern"] :is(.k-btn.sec,.k-btn.plain,.btn.plain,.k-btn.gold,.btn.gold,.k-btn.danger,.btn.danger,.k-btn.sm,.k-btn.noseal)::before{content:none} /* secondary: the double rule */ html[data-ui-theme="tavern"] :is(.k-btn.sec,.k-btn.plain,.btn.plain){border-width:8px;border-image:url(/v3/assets/img/glad/flat/ui/tv/plate_rule.png?v=1) 16 fill / 8px stretch;color:#2a1808} html[data-ui-theme="tavern"] :is(.k-btn.sec,.k-btn.plain,.btn.plain):hover:not(:disabled),html[data-ui-theme="tavern"] :is(.k-btn.sec,.k-btn.plain,.btn.plain):focus-visible{border-image-source:url(/v3/assets/img/glad/flat/ui/tv/plate_rule.png?v=1);color:#1a0e04;filter:brightness(1.08) drop-shadow(0 2px 0 rgba(60,36,10,.3))} /* money: gilt */ html[data-ui-theme="tavern"] :is(.k-btn.gold,.btn.gold){border-width:9px;border-image:url(/v3/assets/img/glad/flat/ui/tv/plate_gold.png?v=1) 18 fill / 9px stretch;color:#4a2e04;box-shadow:none} html[data-ui-theme="tavern"] :is(.k-btn.gold,.btn.gold):hover:not(:disabled),html[data-ui-theme="tavern"] :is(.k-btn.gold,.btn.gold):focus-visible{border-image-source:url(/v3/assets/img/glad/flat/ui/tv/plate_gold.png?v=1);color:#3a2002;filter:brightness(1.06) drop-shadow(0 0 5px rgba(217,164,64,.6))} /* danger: the scribe's red */ html[data-ui-theme="tavern"] :is(.k-btn.danger,.btn.danger){border:8px solid transparent;border-radius:0;border-image:url(/v3/assets/img/glad/flat/ui/tv/plate_red.png?v=1) 16 fill / 8px stretch;background:none;box-shadow:none;color:var(--tv-red);min-height:40px} html[data-ui-theme="tavern"] :is(.k-btn.danger,.btn.danger):hover:not(:disabled),html[data-ui-theme="tavern"] :is(.k-btn.danger,.btn.danger):focus-visible{background:none;border-image-source:url(/v3/assets/img/glad/flat/ui/tv/plate_red.png?v=1);color:#8a1a12;filter:brightness(1.05) saturate(1.2) drop-shadow(0 0 4px rgba(168,36,28,.35))} html[data-ui-theme="tavern"] :is(.k-btn.sec,.k-btn.plain,.btn.plain,.k-btn.gold,.btn.gold,.k-btn.danger,.btn.danger):active:not(:disabled){filter:brightness(.92)} /* small: a number / square button; the primary small one stays ink */ html[data-ui-theme="tavern"] .k-btn.sm{min-height:30px;padding:0 8px;font:italic 600 13px/1 var(--tv-fb)} html[data-ui-theme="tavern"] .k-btn.sm:is(.sec,.plain){font-style:normal} /* disabled: a faded pencil line */ html[data-ui-theme="tavern"] :is(.k-btn,.btn):disabled,html[data-ui-theme="tavern"] :is(.k-btn,.btn).off{border:1px dashed rgba(60,36,10,.42);border-image:none;background:none;box-shadow:none;filter:none;opacity:1;color:rgba(60,44,24,.5);cursor:default;transform:none} html[data-ui-theme="tavern"] :is(.k-btn,.btn):disabled::before{filter:grayscale(1) opacity(.35);transform:rotate(-6deg)} html[data-ui-theme="tavern"] :is(.k-btn,.btn):disabled img{filter:grayscale(1) opacity(.5)} /* ---------------------------------------------------------------- TABS: FOLDER TABS in their own colours (ctla / tA, BUILD.md rule 2) ---------------------------------------------------------------- A tab row is .k-tabs > button[aria-selected]. Each tab may set --tc (its colour); the wash is DEEP and muted (rule 2: "a lot darker ... more relevant to the Tavern theme"): a dark oak folder tinted by --tc, cream ink. The picked one is the page's own paper, joined to the body, with a stripe of --tc on top. */ html[data-ui-theme="tavern"] .k-tabs{gap:4px;padding:8px 12px 0;border-bottom:2px solid var(--tv-card-line);background:linear-gradient(rgba(30,18,8,.12),rgba(30,18,8,.12)),var(--tv-ground)} html[data-ui-theme="tavern"] .k-tabs button{--tc:#6a5236;position:relative;margin-bottom:-2px;padding:7px 12px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap; border:2px solid color-mix(in srgb,var(--tc) 40%,#140c06);border-bottom:0;border-radius:8px 8px 0 0; background:linear-gradient(color-mix(in srgb,var(--tc) 34%,#3a2816),color-mix(in srgb,var(--tc) 18%,#22160c));box-shadow:inset 0 1px 0 rgba(255,230,190,.12); color:color-mix(in srgb,var(--tc) 22%,#e6d2a6);font:600 15px/1 var(--tv-fh);letter-spacing:.02em;text-transform:none;text-shadow:0 1px 0 rgba(0,0,0,.45);cursor:pointer} html[data-ui-theme="tavern"] .k-tabs button img{width:20px;height:20px;position:relative} html[data-ui-theme="tavern"] .k-tabs button small{padding:2px 6px;border-radius:99px;background:rgba(0,0,0,.28);color:#e6d2a6;font:700 12px/1 var(--tv-fb);text-shadow:none} html[data-ui-theme="tavern"] .k-tabs button:hover{background:linear-gradient(color-mix(in srgb,var(--tc) 44%,#4a3420),color-mix(in srgb,var(--tc) 24%,#2a1c10));color:#f6e9cc;padding-top:9px} html[data-ui-theme="tavern"] .k-tabs button[aria-selected="true"]{z-index:1;padding:10px 14px 9px;background:linear-gradient(var(--tv-paper-hi),var(--tv-paper));color:var(--tv-ink);text-shadow:none; border-color:color-mix(in srgb,var(--tc) 60%,#3a2410);box-shadow:inset 0 4px 0 color-mix(in srgb,var(--tc) 80%,#2a1c12)} html[data-ui-theme="tavern"] .k-tabs button[aria-selected="true"] small{background:color-mix(in srgb,var(--tc) 18%,transparent);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .k-tabs button:focus-visible{outline:2px solid var(--tv-act);outline-offset:-3px} /* the segmented strip (.k-seg): chunky field chips, the picked one verdigris (fields pick .tseg) */ html[data-ui-theme="tavern"] .k-seg{gap:4px;padding:0;border-radius:0;background:none;box-shadow:none} html[data-ui-theme="tavern"] .k-seg button{padding:8px 10px;border-radius:6px;background:var(--tv-field);box-shadow:inset 0 0 0 2px var(--tv-fline),inset 0 -3px 0 2px rgba(90,56,20,.18);color:var(--tv-ink2);font:700 13px/1 var(--tv-fb)} html[data-ui-theme="tavern"] .k-seg button:hover{background:#f2e6c4;color:var(--tv-ink)} html[data-ui-theme="tavern"] .k-seg button[aria-pressed="true"]{background:linear-gradient(var(--tv-act-hi),var(--tv-act-dk));color:#fff;text-shadow:0 1px 0 #0e2e28;box-shadow:inset 0 0 0 2px var(--tv-fline),inset 0 3px 0 2px rgba(255,255,255,.22)} html[data-ui-theme="tavern"] .k-seg button small{background:rgba(60,36,10,.14);color:inherit}html[data-ui-theme="tavern"] .k-seg button[aria-pressed="true"] small{background:rgba(255,255,255,.22)} /* ---------------------------------------------------------------- CHIPS, ROWS, CARDS ---------------------------------------------------------------- */ html[data-ui-theme="tavern"] .k-chip{background:rgba(60,36,10,.13);color:var(--tv-ink2);font:700 13px/1.3 var(--tv-fb)} html[data-ui-theme="tavern"] .k-chip img{width:20px;height:20px;margin:-2px 0} html[data-ui-theme="tavern"] .k-chip.good{background:var(--tv-good-bg);color:var(--tv-good)}html[data-ui-theme="tavern"] .k-chip.bad{background:var(--tv-bad-bg);color:var(--tv-bad)} html[data-ui-theme="tavern"] .k-chip.gold{background:var(--tv-gold-bg);color:var(--tv-gold-ink)}html[data-ui-theme="tavern"] .k-chip.rare{background:var(--tv-rare-bg);color:var(--tv-rare)} html[data-ui-theme="tavern"] .k-row{background:var(--tv-card-lt);box-shadow:var(--tv-inset);color:var(--tv-ink)} html[data-ui-theme="tavern"] .k-row:hover:not(:disabled){background:#ddcba0;box-shadow:inset 0 0 0 1.5px #5e4c32,0 2px 6px rgba(60,40,10,.15)} html[data-ui-theme="tavern"] .k-row b{font:600 15px/1.2 var(--tv-fh);letter-spacing:.01em} html[data-ui-theme="tavern"] .k-row small{font:600 13px/1.3 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .k-row.on{background:var(--tv-paper-hi);box-shadow:inset 0 0 0 2.5px var(--tv-act),0 0 0 3px var(--tv-act-soft)} html[data-ui-theme="tavern"] .k-row.off{background:rgba(185,162,115,.5);box-shadow:inset 0 0 0 1.5px rgba(126,104,68,.5)}html[data-ui-theme="tavern"] .k-row.off b{color:var(--tv-ink3)} /* ---------------------------------------------------------------- SLOTS (BUILD.md rule 1) ---------------------------------------------------------------- "Do not use the wooden outline for items, anywhere, ever. Instead, replicate what the Midnight theme does but with Tavern colors applied." Midnight's slot is a sunken plate (its iron tile), a 1px dark line, a faint lip, a soft shadow inside; counts in a dark pill top right; a rolled piece lit from below in its rarity's colour with a ring of it; pointed at = the action colour round it. Here: the well is smoked parchment a step deeper than the page, the line dark ink, the pill near-black with Old School yellow figures, the action colour verdigris. Over the world (the quick slots) the well is the Cellar's dark oak (--tv-well-dk). */ html[data-ui-theme="tavern"] :is(.slot,.k-slot,.eq,.hs-bi,.dlg-face,.qslot){border:1px solid var(--tv-well-line);border-image:none;border-radius:3px;background:var(--tv-well);box-shadow:var(--tv-well-sh);color:var(--tv-ink);image-rendering:auto} html[data-ui-theme="tavern"] :is(.slot,.k-slot,.eq,.hs-bi) :is(img,.ico){image-rendering:pixelated} html[data-ui-theme="tavern"] :is(.slot,.eq):hover:not(.empty):not(.locked):not(:disabled){background:var(--tv-well);filter:none;outline:2px solid rgba(47,140,125,.8);outline-offset:1px;z-index:2} html[data-ui-theme="tavern"] .slot.empty{background:var(--tv-well);opacity:.6} html[data-ui-theme="tavern"] .slot.locked{opacity:.4;background:repeating-linear-gradient(45deg,rgba(60,36,18,.18) 0 3px,transparent 3px 7px),var(--tv-well)} html[data-ui-theme="tavern"] .eq.empty{opacity:.6} html[data-ui-theme="tavern"] .eq small{color:var(--tv-ink3)} /* the count: a dark pill, top right, Old School figures (yellow, white at 10,000, green at 1M); low when a mark has the corner */ html[data-ui-theme="tavern"] .slot>em:is(:not([class]),.k,.m){left:auto;top:2px;right:2px;bottom:auto;padding:0 4px;border-radius:2px;background:var(--tv-count);box-shadow:inset 0 0 0 1px rgba(255,230,180,.12); font:700 13px/15px var(--tv-fb);color:#ffe04a;text-shadow:none} html[data-ui-theme="tavern"] .slot>em.k{color:#fff}html[data-ui-theme="tavern"] .slot>em.m{color:#4cf05a} html[data-ui-theme="tavern"] .slot:has(>.fgn,>em.rr)>em:is(:not([class]),.k,.m){top:auto;bottom:2px} html[data-ui-theme="tavern"] .k-slot u{right:-3px;bottom:-4px;padding:1px 4px;border-radius:2px;background:var(--tv-count);font:700 13px/1 var(--tv-fb);color:#ffe7b0} /* the favourite: a verdigris corner with a star (Midnight's corner, in the action colour) */ html[data-ui-theme="tavern"] .slot>em.fav{left:0;top:0;width:16px;height:16px;font-size:0;line-height:0;color:transparent;text-shadow:none;background:linear-gradient(135deg,var(--tv-act) 50%,transparent 50%);filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))} html[data-ui-theme="tavern"] .slot>em.fav::after{content:"\2605";position:absolute;left:1px;top:0;font:8px/9px Lora,serif;color:#f6e9cc} /* the bag: a rolled piece is lit from below in its rarity's colour with a ring of it (Midnight's "framed by rarity") */ html[data-ui-theme="tavern"] .inv .slot.rar{background:radial-gradient(90% 70% at 50% 100%,color-mix(in srgb,var(--rr) 40%,transparent),transparent 75%),var(--tv-well); box-shadow:inset 0 0 0 2px var(--rr),var(--tv-well-sh);outline:1px solid color-mix(in srgb,var(--rr) 55%,#1a0e06);outline-offset:0} html[data-ui-theme="tavern"] .slot:has(em.rr){box-shadow:inset 0 0 0 2px var(--rrc,#3f7fe0),var(--tv-well-sh)} html[data-ui-theme="tavern"] .inv .slot.nw{box-shadow:inset 0 0 0 1px rgba(255,216,74,.7),inset 0 0 14px rgba(255,216,74,.32),var(--tv-well-sh)} html[data-ui-theme="tavern"] .inv .slot:not(.empty):not(.locked):hover{outline:2px solid var(--tv-act);outline-offset:1px;z-index:3;filter:none} html[data-ui-theme="tavern"] .slot.sel,html[data-ui-theme="tavern"] .slot.on{box-shadow:inset 0 0 0 2px var(--tv-act),0 0 8px rgba(79,179,160,.55)} html[data-ui-theme="tavern"] .slot.hint{outline:3px solid var(--tv-act-hi);outline-offset:-3px} /* the equipment grid (Round Nine's .eqg): the same well; a rolled piece rings in its rarity */ html[data-ui-theme="tavern"] .eqg .eq.eqg-s{border-radius:3px} html[data-ui-theme="tavern"] .eqg .eq.eqg-s.rar{box-shadow:inset 0 0 0 1px var(--rr),inset 0 0 12px color-mix(in srgb,var(--rr) 30%,transparent),0 0 8px color-mix(in srgb,var(--rr) 26%,transparent)} html[data-ui-theme="tavern"] .eqg .eq.eqg-s:not(.empty):not(.lockd):hover{outline:2px solid var(--tv-act);outline-offset:2px} /* the quick slots sit over the world: the dark well */ html[data-ui-theme="tavern"] .qslot{border-color:#050302;background:var(--tv-well-dk);box-shadow:inset 0 1px 0 rgba(255,230,190,.12),inset 0 -6px 10px rgba(0,0,0,.4),0 0 0 1px rgba(138,132,120,.55);color:var(--tv-hud-ink)} html[data-ui-theme="tavern"] .qslot:hover{border-image:none;box-shadow:inset 0 1px 0 rgba(255,230,190,.12),inset 0 -6px 10px rgba(0,0,0,.4),0 0 0 1px var(--tv-act-hi)} html[data-ui-theme="tavern"] .qslot.worn{box-shadow:inset 0 0 0 2px rgba(79,179,160,.75),0 0 0 1px rgba(138,132,120,.55)} /* ---------------------------------------------------------------- FIELDS: the STORYBOOK fields (ctlb / c), in Cellar ink ---------------------------------------------------------------- Every text box, search box, number box, select and textarea in a window or the side panel: a ruled ink box on the field paper, italic placeholder, a verdigris ring when focused. A select carries the pick's verdigris button with a white arrow. Sizes are left to each box (the fields keep the height their window gave them); the pick's own is 38px (30px small). */ html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.ipop,.info) :is(input:is([type="text"],[type="search"],[type="number"],:not([type])),textarea,select){ border:0;border-radius:6px;background-color:var(--tv-field);background-image:none;box-shadow:inset 0 0 0 2.5px var(--tv-fline),inset 0 3px 0 2.5px rgba(90,56,20,.2); color:var(--tv-ink);font-family:var(--tv-fb);font-weight:600;outline:none} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.ipop,.info) :is(input,textarea)::placeholder{font-style:italic;font-weight:400;color:#7a5e3a;opacity:1} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.ipop,.info) :is(input:is([type="text"],[type="search"],[type="number"],:not([type])),textarea,select):focus{box-shadow:inset 0 0 0 2.5px var(--tv-fline),0 0 0 3px var(--tv-act)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.ipop,.info) select{-webkit-appearance:none;appearance:none;padding-right:44px;cursor:pointer;font-weight:700; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23fff'/%3E%3C/svg%3E") right 11px center/12px 8px no-repeat,linear-gradient(var(--tv-act-hi),var(--tv-act-dk)) right 0 top 0/34px 100% no-repeat,var(--tv-field); box-shadow:inset 0 0 0 2.5px var(--tv-fline),inset -34px 0 0 0 transparent,inset -36.5px 0 0 0 var(--tv-fline)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.ipop,.info) select:focus{box-shadow:inset 0 0 0 2.5px var(--tv-fline),inset -36.5px 0 0 0 var(--tv-fline),0 0 0 3px var(--tv-act)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.ipop,.info) select option{background:var(--tv-field);color:var(--tv-ink);font-weight:600} /* checkboxes: a 22px ruled box, an ink-green tick (the pick's 26px box is the settings rows' own, below) */ html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="checkbox"]:not(.ui-raw){-webkit-appearance:none;appearance:none;flex:none;width:22px;height:22px;margin:0;border:0;border-radius:5px;cursor:pointer;vertical-align:middle; background:var(--tv-field);box-shadow:inset 0 0 0 2.5px var(--tv-fline),inset 0 3px 0 2.5px rgba(90,56,20,.18)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="checkbox"]:not(.ui-raw):checked{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M5 11.5l4 4 8-9' fill='none' stroke='%231d5e53' stroke-width='3.6' stroke-linecap='square'/%3E%3C/svg%3E") 50% 50%/22px 22px no-repeat,var(--tv-field)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="checkbox"]:not(.ui-raw):focus-visible{outline:2px solid var(--tv-act);outline-offset:2px} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="radio"]{accent-color:var(--tv-act)} /* ---------------------------------------------------------------- THE HOW-MANY SLIDER (ctlb / d) ---------------------------------------------------------------- input[type=range]: a thin track, a round paper thumb in a wood ring. The fill is verdigris to the thumb: es-tv-base reads --p (0-100%) when a window sets it, else accent-color fills it natively. */ html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="range"]{-webkit-appearance:none;appearance:none;height:22px;margin:0;background:none;accent-color:var(--tv-act);cursor:pointer} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--tv-act) var(--p,0%),rgba(40,24,8,.28) var(--p,0%))} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--tv-paper-hi);box-shadow:0 0 0 2px var(--tv-wood),0 1px 2px rgba(0,0,0,.35)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:rgba(40,24,8,.28)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="range"]::-moz-range-progress{height:4px;border-radius:2px;background:var(--tv-act)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="range"]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--tv-paper-hi);box-shadow:0 0 0 2px var(--tv-wood),0 1px 2px rgba(0,0,0,.35)} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="range"]:focus-visible{outline:2px solid var(--tv-act);outline-offset:3px} html[data-ui-theme="tavern"] :is(.win,.k-win,.side,.pop-card,.dlg,.info) input[type="range"]:disabled{opacity:.4;cursor:default} /* ---------------------------------------------------------------- THE HEAD, wherever a module draws its own (the stations' .k-head inside .st-mod) ---------------------------------------------------------------- */ html[data-ui-theme="tavern"] .k-head>b{display:inline-flex;align-items:center;gap:10px} html[data-ui-theme="tavern"] .k-head>b>img,html[data-ui-theme="tavern"] .k-head>b>.ico{width:32px;height:32px;flex:none;filter:sepia(.3)} /* the close is the same inked ring everywhere: the stations reset every button in their box (an id rule), so this one holds with !important */ html[data-ui-theme="tavern"] :is(.win-x,.k-x,.dlg-x,.info-x){width:30px!important;height:30px!important;padding:0!important;border:0!important;border-radius:50%!important;box-shadow:none!important; background:url(/v3/assets/img/glad/flat/ui/tv/close.png?v=1) 50% 50%/25px 25px no-repeat!important;font-size:0!important;color:transparent!important;text-shadow:none!important} html[data-ui-theme="tavern"] :is(.win-x,.k-x,.dlg-x,.info-x):is(:hover,:focus-visible){background:url(/v3/assets/img/glad/flat/ui/tv/close_hv.png?v=1) 50% 50%/25px 25px no-repeat,radial-gradient(circle,rgba(168,40,40,.18) 0 11px,transparent 11.5px)!important} html[data-ui-theme="tavern"] :is(.win-x,.k-x,.dlg-x,.info-x):active{background:url(/v3/assets/img/glad/flat/ui/tv/close_hv.png?v=1) 50% 50%/25px 25px no-repeat,radial-gradient(circle,rgba(126,26,20,.34) 0 11px,transparent 11.5px)!important} /* ---------------------------------------------------------------- SEARCH BOXES with their own magnifier (the bag's .isearch, the bank's box) ---------------------------------------------------------------- */ html[data-ui-theme="tavern"] .isearch{gap:9px;border-radius:6px;background:var(--tv-field);box-shadow:inset 0 0 0 2.5px var(--tv-fline),inset 0 3px 0 2.5px rgba(90,56,20,.2);color:var(--tv-fline)} html[data-ui-theme="tavern"] .isearch b{width:13px;height:13px;border-color:var(--tv-fline)}html[data-ui-theme="tavern"] .isearch b::after{background:var(--tv-fline);width:6px;right:-6px} html[data-ui-theme="tavern"] .isearch input,html[data-ui-theme="tavern"] .side .isearch input{height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none!important;font:600 13px/1 var(--tv-fb);color:var(--tv-ink)} html[data-ui-theme="tavern"] .isearch:focus-within{color:var(--tv-fline);box-shadow:inset 0 0 0 2.5px var(--tv-fline),0 0 0 3px var(--tv-act)} html[data-ui-theme="tavern"] #bankWin .bk-search{border:0;border-radius:6px;padding-left:12px;background:var(--tv-field);box-shadow:inset 0 0 0 2.5px var(--tv-fline),inset 0 3px 0 2.5px rgba(90,56,20,.2);font:600 13px/1.2 var(--tv-fb)} html[data-ui-theme="tavern"] #bankWin .bk-search:focus{box-shadow:inset 0 0 0 2.5px var(--tv-fline),0 0 0 3px var(--tv-act)} html[data-ui-theme="tavern"] #bankWin .bk-kind{border:0;border-radius:6px;font:700 13px/1.2 var(--tv-fb)} html[data-ui-theme="tavern"] .bk-sx{background:rgba(58,36,16,.16);color:var(--tv-ink2)} /* ---------------------------------------------------------------- THE SETTINGS WINDOW'S PIECES (fields pick: .tset rows, .tswitch, .tseg) ---------------------------------------------------------------- */ html[data-ui-theme="tavern"] .sets{gap:6px} html[data-ui-theme="tavern"] .set{gap:16px;padding:10px 14px;border:0;border-radius:8px;background:rgba(220,203,159,.55);box-shadow:inset 0 0 0 3px var(--tv-fline2),inset 0 0 0 4px rgba(240,226,190,.6),inset 0 -4px 0 4px rgba(90,56,20,.16)} html[data-ui-theme="tavern"] .set:hover{background:rgba(232,218,180,.7)} html[data-ui-theme="tavern"] .set b{font:700 15px/1.2 var(--tv-fb);color:var(--tv-ink)} html[data-ui-theme="tavern"] .set small{margin-top:2px;font:600 13px/1.3 var(--tv-fb);color:var(--tv-ink2)} /* the switch: a dark slot with a paper key; on, the slot is verdigris (62 x 32 in the pick; 54 x 28 here, so a row keeps its height) */ html[data-ui-theme="tavern"] .sw{width:54px;height:28px} html[data-ui-theme="tavern"] .sw span{border-radius:7px;background:linear-gradient(#4a3020,#2a180c);box-shadow:inset 0 0 0 2px #120a04,inset 0 3px 3px rgba(0,0,0,.4)} html[data-ui-theme="tavern"] .sw span::after{left:4px;top:4px;width:22px;height:20px;border-radius:5px;background:linear-gradient(#e8d6a8,#bfa16a);box-shadow:inset 0 0 0 2px #3a2410,inset 0 3px 0 2px rgba(255,255,255,.3)} html[data-ui-theme="tavern"] .sw input:checked+span{background:linear-gradient(var(--tv-act-hi),var(--tv-act-dk));box-shadow:inset 0 0 0 2px #0e2e28,inset 0 3px 3px rgba(0,40,30,.3)} html[data-ui-theme="tavern"] .sw input:checked+span::after{transform:translateX(24px)} html[data-ui-theme="tavern"] .sw input:focus-visible+span{outline:2px solid var(--tv-act);outline-offset:2px} /* a choice strip (the settings' .ui-seg): chunky field chips, the picked one verdigris */ html[data-ui-theme="tavern"] .ui-seg{gap:4px;border:0;border-radius:0;overflow:visible;background:none} html[data-ui-theme="tavern"] .ui-seg button{padding:8px 10px;border:0;border-radius:6px;background:var(--tv-field);box-shadow:inset 0 0 0 2px var(--tv-fline),inset 0 -3px 0 2px rgba(90,56,20,.18);color:var(--tv-ink2);font:700 13px/1 var(--tv-fb)} html[data-ui-theme="tavern"] .ui-seg button[aria-pressed="true"]{background:linear-gradient(var(--tv-act-hi),var(--tv-act-dk));color:#fff;text-shadow:0 1px 0 #0e2e28;box-shadow:inset 0 0 0 2px var(--tv-fline),inset 0 3px 0 2px rgba(255,255,255,.22)} html[data-ui-theme="tavern"] .ui-range output{font:700 13px var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .ui-pieces{border:0;border-radius:8px;background:rgba(60,36,10,.09);box-shadow:inset 0 0 0 1.5px var(--tv-card-line)} html[data-ui-theme="tavern"] .ui-pc{border:0;background:var(--tv-card-lt);box-shadow:inset 0 0 0 1.5px var(--tv-card-line);font:600 13px var(--tv-fb)} html[data-ui-theme="tavern"] .ui-pc button{background:var(--tv-act-dk);font:700 12px/1.4 var(--tv-fb)}html[data-ui-theme="tavern"] .ui-pc button[data-ui-back]{background:var(--tv-wood)} html[data-ui-theme="tavern"] .ui-look{border:0;border-radius:8px;background:var(--tv-card-lt);box-shadow:var(--tv-inset);color:var(--tv-ink)} html[data-ui-theme="tavern"] .ui-look[aria-pressed="true"]{background:var(--tv-paper-hi);box-shadow:inset 0 0 0 2.5px var(--tv-act),0 0 0 3px var(--tv-act-soft)} html[data-ui-theme="tavern"] .ui-look b{font:600 15px/1.1 var(--tv-fh)}html[data-ui-theme="tavern"] .ui-look small{font:600 13px/1.3 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .ui-ognote{border:0;border-radius:6px;background:var(--tv-card-lt);box-shadow:var(--tv-inset);font:600 13px/1.4 var(--tv-fb)} /* ---------------------------------------------------------------- HOW-MANY PRESETS (slider pick's presets: 1 5 10 25 All) ---------------------------------------------------------------- The shop's .qty, the bank's Move row (.bk-amt + its X box), the Exchange's .ex-q: small ruled pills; the picked one solid ink. */ html[data-ui-theme="tavern"] .qty{gap:4px;padding:0;border-radius:0;background:none;box-shadow:none} html[data-ui-theme="tavern"] :is(.qty button,.bk-amt button,.ex-q button),html[data-ui-theme="tavern"] #bkX{min-width:28px;padding:5px 10px;border:0;border-radius:4px;background:var(--tv-card-lt);box-shadow:inset 0 0 0 1.5px var(--tv-card-line);color:var(--tv-ink2);font:700 13px/1 var(--tv-fb)} html[data-ui-theme="tavern"] .bk-amt{gap:4px}html[data-ui-theme="tavern"] .bk-amt button,html[data-ui-theme="tavern"] #bkX{height:26px;padding:0 6px} html[data-ui-theme="tavern"] :is(.qty button,.bk-amt button,.ex-q button):hover{background:var(--tv-paper-hi);color:var(--tv-ink)} html[data-ui-theme="tavern"] :is(.qty button[aria-pressed="true"],.bk-amt button[aria-pressed=true],.ex-q button[aria-pressed="true"],.ex-q button.on),html[data-ui-theme="tavern"] #bkX.on{background:#2a1a0c;color:#f6e9cc;box-shadow:inset 0 0 0 1px rgba(246,233,204,.35)} html[data-ui-theme="tavern"] #bkX:focus{box-shadow:inset 0 0 0 1.5px var(--tv-card-line),0 0 0 3px var(--tv-act)} /* ---------------------------------------------------------------- MORE FOLDER-TAB ROWS (wtabs pick + BUILD.md rule 2: deep, muted washes) ---------------------------------------------------------------- The bank's stash tabs (.bk-stab, each with its own --tc) and the Exchange's tabs (.ex-tabs, aria-pressed) wear .k-tabs' dark folders. */ html[data-ui-theme="tavern"] .bk-stabs{gap:4px;border-bottom-color:color-mix(in srgb,var(--tc) 55%,#2a1c12)} html[data-ui-theme="tavern"] .bk-stab,html[data-ui-theme="tavern"] .ex-tabs button{border:2px solid color-mix(in srgb,var(--tc,#6a5236) 40%,#140c06);border-bottom:0;border-radius:8px 8px 0 0; background:linear-gradient(color-mix(in srgb,var(--tc,#6a5236) 34%,#3a2816),color-mix(in srgb,var(--tc,#6a5236) 18%,#22160c));box-shadow:inset 0 1px 0 rgba(255,230,190,.12); color:color-mix(in srgb,var(--tc,#6a5236) 22%,#e6d2a6);font:600 15px/1 var(--tv-fh);letter-spacing:.02em;text-shadow:0 1px 0 rgba(0,0,0,.45)} html[data-ui-theme="tavern"] .bk-stab small{color:#e6d2a6;opacity:.85;font:700 12px var(--tv-fb)} html[data-ui-theme="tavern"] .bk-stab img{width:20px;height:20px} html[data-ui-theme="tavern"] .bk-stab:hover,html[data-ui-theme="tavern"] .ex-tabs button:hover{background:linear-gradient(color-mix(in srgb,var(--tc,#6a5236) 44%,#4a3420),color-mix(in srgb,var(--tc,#6a5236) 24%,#2a1c10));color:#f6e9cc} html[data-ui-theme="tavern"] .bk-stab[aria-pressed=true],html[data-ui-theme="tavern"] .ex-tabs button[aria-pressed="true"]{background:linear-gradient(var(--tv-paper-hi),var(--tv-paper));color:var(--tv-ink);text-shadow:none; border-color:color-mix(in srgb,var(--tc,#6a5236) 60%,#3a2410);box-shadow:inset 0 4px 0 color-mix(in srgb,var(--tc,#6a5236) 80%,#2a1c12)} html[data-ui-theme="tavern"] .bk-stab[aria-pressed=true] small{color:var(--tv-ink2);opacity:1} html[data-ui-theme="tavern"] .ex-tabs{border-bottom:2px solid var(--tv-card-line);background:linear-gradient(rgba(30,18,8,.12),rgba(30,18,8,.12)),var(--tv-ground)} html[data-ui-theme="tavern"] .bk-pane{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 35%,var(--tv-card-line))} html[data-ui-theme="tavern"] .bk-thead{font:600 12px var(--tv-fh);color:var(--tv-label)} /* ---------------------------------------------------------------- THE ITEM CARD: THE ILLUMINATED HEADER (over / illum) ---------------------------------------------------------------- #gearTip.dz, built by eastscape-tip.js htmlDz (the card Midnight wears, the Tavern wears it too since 2026-10-17): an oak frame; a dark head washed in the piece's rarity (--rar; plain gear smoked brass) with the band, the name, then the piece in its well with what it is and what it needs; the stat rows with their arrows; the lines in gold ink under a "Lines" rule; the reforge strip; the words; the price; the keys. Over it, the small "Wearing now" card. */ html[data-ui-theme="tavern"] #gearTip.dz[hidden]{display:none} html[data-ui-theme="tavern"] #gearTip.dz{display:flex;flex-direction:column;gap:8px;width:316px;padding:0;border:0;border-radius:0;border-image:none;background:none;box-shadow:none;filter:var(--tv-drop);font:400 15px/1.35 var(--tv-fb);color:var(--tv-ink)} html[data-ui-theme="tavern"] #gearTip .dz-worn{width:210px;padding:6px 10px 8px;border:8px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/tv/win.png?v=1) 12 / 8px stretch;background:var(--tv-ground) padding-box;font:600 13px/1.3 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] #gearTip .dz-worn small{display:block;margin-bottom:4px;font:600 12px var(--tv-fh);letter-spacing:.14em;text-transform:uppercase;color:var(--tv-label)} html[data-ui-theme="tavern"] #gearTip .dz-worn>div{display:flex;align-items:center;gap:8px}html[data-ui-theme="tavern"] #gearTip .dz-worn b{font:600 13px var(--tv-fb);color:var(--tv-ink)} html[data-ui-theme="tavern"] #gearTip .dz-ws{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--tv-well-line);border-radius:3px;background:var(--tv-well);box-shadow:var(--tv-well-sh)} html[data-ui-theme="tavern"] #gearTip .dz-ws :is(img,.ico){width:32px;height:32px;margin:0} html[data-ui-theme="tavern"] #gearTip .dz-card{border:10px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/tv/bagframe_oak.png?v=1) 28 fill / 10px stretch;image-rendering:pixelated;background:none} html[data-ui-theme="tavern"] #gearTip :is(.dz-h,.dz-ip){color:#f6e9cc;background:radial-gradient(120% 140% at 15% 50%,color-mix(in srgb,var(--rar) 50%,transparent),color-mix(in srgb,var(--rar) 10%,transparent) 60%,transparent),linear-gradient(#2a1c12,#120c08);background-attachment:local} html[data-ui-theme="tavern"] #gearTip .dz-h{position:relative;padding:10px 12px 2px} html[data-ui-theme="tavern"] #gearTip .dz-h span{display:flex;align-items:center;gap:6px;font:600 12px/1.3 var(--tv-fh);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--rar) 75%,#fff)} html[data-ui-theme="tavern"] #gearTip .dz-h b{display:block;margin-top:2px;font:700 20px/1.2 var(--tv-fh);letter-spacing:.02em;color:#fff6dc} html[data-ui-theme="tavern"] #gearTip .dz-h b i{font-style:normal;color:#ffd84a} html[data-ui-theme="tavern"] #gearTip .dz-ip{display:flex;gap:12px;align-items:center;padding:6px 12px 10px;box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--rar) 85%,transparent)} html[data-ui-theme="tavern"] #gearTip .dz-sl{display:grid;place-items:center;flex:none;width:80px;height:80px;border:1px solid var(--tv-well-line);border-radius:3px;background:var(--tv-well);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rar) 70%,transparent),var(--tv-well-sh)} html[data-ui-theme="tavern"] #gearTip .dz-sl :is(img,.ico){width:64px;height:64px;margin:0;image-rendering:pixelated} html[data-ui-theme="tavern"] #gearTip .dz-ip>div{display:flex;flex-direction:column;gap:2px;min-width:0;font:600 13px/1.3 var(--tv-fb);color:#cdb88e} html[data-ui-theme="tavern"] #gearTip .dz-ip>div b{font:600 15px/1.2 var(--tv-fh);letter-spacing:.03em;color:#f6e9cc} html[data-ui-theme="tavern"] #gearTip .dz-ip small{font:600 13px/1.3 var(--tv-fb);color:#cdb88e}html[data-ui-theme="tavern"] #gearTip .dz-ip small.no{color:#ff8a7a} html[data-ui-theme="tavern"] #gearTip :is(.dz-st,.dz-ln,.dz-ow,.dz-fg,.dz-fx,.dz-fl,.dz-f,.dz-k){margin:0;background:var(--tv-ground)} html[data-ui-theme="tavern"] #gearTip .dz-st{display:flex;flex-direction:column;padding:6px 12px 2px} html[data-ui-theme="tavern"] #gearTip .dz-st div{display:grid;grid-template-columns:20px 1fr auto 52px;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--tv-line);font:400 15px/1.3 var(--tv-fb)} html[data-ui-theme="tavern"] #gearTip .dz-st img{width:20px;height:20px} html[data-ui-theme="tavern"] #gearTip .dz-st b{font-weight:700;color:var(--tv-ink);font-variant-numeric:tabular-nums} html[data-ui-theme="tavern"] #gearTip .dz-st div>span{text-align:right;font:700 13px/1 var(--tv-fb)} html[data-ui-theme="tavern"] #gearTip .dz-up{color:var(--tv-good)}html[data-ui-theme="tavern"] #gearTip .dz-dn{color:var(--tv-bad)} html[data-ui-theme="tavern"] #gearTip :is(.dz-h,.dz-ip) .dz-up{color:#8fe39b}html[data-ui-theme="tavern"] #gearTip :is(.dz-h,.dz-ip) .dz-dn{color:#ff9a8e} /* (Round 16) the darker paper greens and reds would vanish on the dark band; it keeps light ones */ html[data-ui-theme="tavern"] #gearTip .dz-ln{display:flex;flex-direction:column;gap:2px;padding:4px 12px 6px} html[data-ui-theme="tavern"] #gearTip .dz-ln::before{content:"\25C6\2003Lines\2003\25C6";display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 4px;font:600 12px/1 var(--tv-fh);letter-spacing:.16em;text-transform:uppercase;color:var(--tv-label); background:linear-gradient(90deg,transparent,var(--tv-card-line) 30%,transparent 30%,transparent 70%,var(--tv-card-line) 70%,transparent) 0 50%/100% 1px no-repeat} html[data-ui-theme="tavern"] #gearTip .dz-ln div{display:flex;gap:7px;align-items:baseline;font:700 15px/1.45 var(--tv-fb);color:var(--tv-gold-ink)} html[data-ui-theme="tavern"] #gearTip .dz-ln small,html[data-ui-theme="tavern"] #gearTip .dz-ow{font:600 13px/1.3 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] #gearTip .dz-ow{padding:2px 12px 6px} html[data-ui-theme="tavern"] #gearTip .dz-mk{display:inline-block;flex:none;width:11px;height:11px;background:var(--rar);vertical-align:-1px} html[data-ui-theme="tavern"] #gearTip .dz-mk.rk-greater{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)} html[data-ui-theme="tavern"] #gearTip .dz-mk.rk-legend{clip-path:polygon(0 22%,26% 52%,50% 4%,74% 52%,100% 22%,90% 92%,10% 92%)} html[data-ui-theme="tavern"] #gearTip .dz-mk.rk-mythic{clip-path:polygon(50% 0,60% 30%,85% 15%,70% 40%,100% 50%,70% 60%,85% 85%,60% 70%,50% 100%,40% 70%,15% 85%,30% 60%,0 50%,30% 40%,15% 15%,40% 30%)} html[data-ui-theme="tavern"] #gearTip .dz-fg{display:flex;justify-content:space-between;flex-wrap:wrap;gap:3px 8px;padding:6px 12px} html[data-ui-theme="tavern"] #gearTip .dz-fg b,html[data-ui-theme="tavern"] #gearTip .dz-fg span{font:600 13px/1.3 var(--tv-fb);color:#2e1a00} html[data-ui-theme="tavern"] #gearTip .dz-fg{background:linear-gradient(90deg,#e0ac40,#f2d070);box-shadow:inset 0 0 0 1px #8a6020} html[data-ui-theme="tavern"] #gearTip .dz-fx{display:flex;flex-direction:column;gap:2px;padding:6px 12px;font:600 13px/1.35 var(--tv-fb)} html[data-ui-theme="tavern"] #gearTip .dz-fl{padding:6px 12px;font:italic 400 13px/1.4 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] #gearTip .dz-f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;border-top:1px solid var(--tv-line);font:600 13px/1.25 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] #gearTip .dz-t{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font:700 15px/1 var(--tv-fb);color:var(--tv-gold-ink);font-variant-numeric:tabular-nums} html[data-ui-theme="tavern"] #gearTip .dz-t :is(img,.ico){width:20px;height:20px;margin:0} html[data-ui-theme="tavern"] #gearTip .dz-k{display:flex;flex-wrap:wrap;gap:4px 12px;padding:2px 12px 10px;font:600 13px/1.2 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] #gearTip .dz-k span{display:inline-flex;align-items:center;gap:5px} html[data-ui-theme="tavern"] #gearTip .dz-k kbd,html[data-ui-theme="tavern"] .tv-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:3px;background:rgba(60,36,10,.14); box-shadow:inset 0 0 0 1px rgba(60,36,10,.4),inset 0 -1px 0 rgba(60,36,10,.3);font:600 12px/1 var(--tv-fb);color:var(--tv-ink2);white-space:nowrap} /* the older card (a piece outside the bag in a look that does not use .dz) and the equipment pane share the palette */ html[data-ui-theme="tavern"] #gearTip:not(.dz){border:10px solid transparent;border-radius:0;border-image:url(/v3/assets/img/glad/flat/ui/tv/bagframe_oak.png?v=1) 28 fill / 10px stretch;background:var(--tv-ground) padding-box;color:var(--tv-ink);font:600 13px/1.35 var(--tv-fb)} /* ---------------------------------------------------------------- THE RIGHT-CLICK MENU: TODAY'S LIST, MADE RIGHT (over / card) ---------------------------------------------------------------- The bag's menu (.bagmenu, eastscape-bag.js) and the bank's (.bk-menu): the brown win.png edge over the Cellar ground, a head with the thing, "Used in", then every choice with its NEW icon (tv/m_*.png, drawn at 20; swapped in over the page's own icon with content:, so no module changed), Drop last in red under a rule. The row under the pointer is verdigris. */ html[data-ui-theme="tavern"] :is(.bagmenu,.bk-menu){width:256px;padding:6px;border:12px solid transparent;border-radius:0;border-image:url(/v3/assets/img/glad/flat/ui/tv/win.png?v=1) 12 / 12px stretch;image-rendering:pixelated; background:var(--tv-ground) padding-box;box-shadow:none;filter:var(--tv-drop);color:var(--tv-ink);font:700 15px/1.2 var(--tv-fb)} html[data-ui-theme="tavern"] :is(.bagmenu-h,.bk-menu-h){display:flex;gap:9px;align-items:center;margin:0;padding:0 4px 8px;border-bottom:1px solid var(--tv-line);background:none;color:var(--tv-ink)} html[data-ui-theme="tavern"] :is(.bagmenu-h,.bk-menu-h) .ico{width:32px;height:32px;flex:none;margin:0} html[data-ui-theme="tavern"] :is(.bagmenu-h,.bk-menu-h) b{font:600 15px/1.2 var(--tv-fh);letter-spacing:.03em;color:var(--tv-ink)} html[data-ui-theme="tavern"] .bk-menu-h small{font:600 13px/1.2 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .bagmenu-u{padding:6px 4px 7px;border-bottom:1px solid var(--tv-line);background:none;font:600 13px/1.3 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .bagmenu-u>b{display:block;margin-bottom:2px;font:600 12px/1.2 var(--tv-fh);letter-spacing:.14em;text-transform:uppercase;color:var(--tv-label)} html[data-ui-theme="tavern"] .bagmenu-u em{font-style:normal;color:var(--tv-ink2)} html[data-ui-theme="tavern"] :is(.bagmenu,.bk-menu)>button{display:flex;align-items:center;gap:10px;width:100%;margin:2px 0 0;padding:6px;border:0;border-radius:4px;background:none;box-shadow:none;text-align:left; color:var(--tv-ink);font:700 15px/1.2 var(--tv-fb);text-shadow:none;cursor:pointer} html[data-ui-theme="tavern"] :is(.bagmenu,.bk-menu)>button:is(:hover,:focus-visible){background:var(--tv-act-soft);box-shadow:inset 3px 0 0 var(--tv-act);outline:none;color:var(--tv-ink)} html[data-ui-theme="tavern"] .bagmenu{display:flex;flex-direction:column}html[data-ui-theme="tavern"] .bagmenu>button.bm-drop{order:9;margin-top:4px;padding-top:9px;border-top:1px solid var(--tv-line);border-radius:0 0 4px 4px;color:var(--tv-bad)} html[data-ui-theme="tavern"] .bagmenu .bmc{display:none} html[data-ui-theme="tavern"] .bk-menu-s{height:1px;margin:4px 2px;background:var(--tv-line)} /* the icons: shown (the base look hides them), 20px, the new set */ html[data-ui-theme="tavern"] .bagmenu img.bmi{display:block;flex:none;width:20px;height:20px;margin:0;image-rendering:auto} html[data-ui-theme="tavern"] .bagmenu img.bmi[src*="act_star"]{content:url(/v3/assets/img/glad/flat/ui/tv/m_fav.png?v=1)} html[data-ui-theme="tavern"] .bagmenu img.bmi[src*="act_eat"]{content:url(/v3/assets/img/glad/flat/ui/tv/m_eat.png?v=1)} html[data-ui-theme="tavern"] .bagmenu img.bmi[src*="act_drink"]{content:url(/v3/assets/img/glad/flat/ui/tv/m_drink.png?v=1)} html[data-ui-theme="tavern"] .bagmenu img.bmi[src*="act_wear"]{content:url(/v3/assets/img/glad/flat/ui/tv/m_wield.png?v=1)} html[data-ui-theme="tavern"] .bagmenu img.bmi[src*="act_chat"]{content:url(/v3/assets/img/glad/flat/ui/tv/m_chat.png?v=1)} html[data-ui-theme="tavern"] .bagmenu img.bmi[src*="act_move"]{content:url(/v3/assets/img/glad/flat/ui/tv/m_move.png?v=1)} html[data-ui-theme="tavern"] .bagmenu img.bmi[src*="act_drop"]{content:url(/v3/assets/img/glad/flat/ui/tv/m_drop.png?v=1)} html[data-ui-theme="tavern"] .bagmenu img.bmi[src*="nav_wiki"]{content:url(/v3/assets/img/glad/flat/ui/tv/m_wiki.png?v=1)} html[data-ui-theme="tavern"] .bagmenu>button[data-use] img.bmi:not([src*="act_"]){width:20px;height:20px} html[data-ui-theme="tavern"] .bagmenu-u span{display:flex;align-items:center;justify-content:flex-start;gap:7px;font:700 13px/1.35 var(--tv-fb);color:var(--tv-ink)}html[data-ui-theme="tavern"] .bagmenu-u span small{margin-left:auto;font:600 13px var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .bagmenu .bmi-sp{display:block;flex:none;width:20px;height:20px} html[data-ui-theme="tavern"] .bagmenu-ex{font:600 13px/1.4 var(--tv-fb);color:var(--tv-ink2)} /* ---------------------------------------------------------------- TOASTS: PARCHMENT NOTICES (over / notice) ---------------------------------------------------------------- #tvToasts.tv-toasts > .tv-toast(.lvl|.ach|.rare|.leg), built by tvToast() in eastscape.html (the bell's add()): the brown win.png edge over the Cellar ground, the picture in a clean well, a line, a x, the clock running out along the foot (verdigris; gold for a Legendary). */ html[data-ui-theme="tavern"] .tv-toasts{position:absolute;top:14px;right:14px;z-index:9;display:grid;gap:8px;width:340px;pointer-events:none} html[data-ui-theme="tavern"] .tv-toast{position:relative;display:flex;gap:10px;align-items:center;padding:6px 30px 9px 6px;border:12px solid transparent;border-image:url(/v3/assets/img/glad/flat/ui/tv/win.png?v=1) 12 / 12px stretch;image-rendering:pixelated; background:var(--tv-ground) padding-box;filter:var(--tv-drop);color:var(--tv-ink);pointer-events:auto;animation:tvToastIn .24s ease-out} html[data-ui-theme="tavern"] .tv-toast.go{cursor:var(--cur-use,pointer)} html[data-ui-theme="tavern"] .tv-toast.out{opacity:0;transform:translateX(12px);transition:opacity .22s,transform .22s} html[data-ui-theme="tavern"] .tv-toast>div{min-width:0} html[data-ui-theme="tavern"] .tv-toast b{display:block;font:600 15px/1.2 var(--tv-fh);letter-spacing:.02em;color:var(--tv-ink)} html[data-ui-theme="tavern"] .tv-toast small{display:block;margin-top:2px;font:600 13px/1.3 var(--tv-fb);color:var(--tv-ink2)} html[data-ui-theme="tavern"] .tv-tslot{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--tv-well-line);border-radius:3px;background:var(--tv-well);box-shadow:var(--tv-well-sh)} html[data-ui-theme="tavern"] .tv-tslot :is(img,.ico){width:32px;height:32px;margin:0;image-rendering:pixelated} html[data-ui-theme="tavern"] .tv-toast.leg b{color:#6a4206}html[data-ui-theme="tavern"] .tv-toast.leg .tv-tslot{box-shadow:0 0 0 2px var(--tv-r-legend),0 0 10px rgba(255,216,74,.6)} html[data-ui-theme="tavern"] .tv-toast.rare b{color:var(--tv-rare)}html[data-ui-theme="tavern"] .tv-toast.rare .tv-tslot{box-shadow:0 0 0 2px var(--tv-r-greater)} html[data-ui-theme="tavern"] .tv-toast.ach b{color:var(--tv-good)} html[data-ui-theme="tavern"] .tv-toast-x{position:absolute;right:0;top:-2px;width:22px;height:22px;padding:0;border:0;background:none;font:700 15px/1 var(--tv-fb);color:var(--tv-ink3);cursor:var(--cur-use,pointer)} html[data-ui-theme="tavern"] .tv-toast-x:hover{color:var(--tv-bad)} html[data-ui-theme="tavern"] .tv-toast-clock{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--tv-act);transform-origin:0 50%;animation:tvToastClock linear forwards} html[data-ui-theme="tavern"] .tv-toast.leg .tv-toast-clock{background:var(--tv-gold)} @keyframes tvToastIn{from{opacity:0;transform:translateX(16px)}} @keyframes tvToastClock{from{transform:scaleX(1)}to{transform:scaleX(0)}} @media (prefers-reduced-motion:reduce){html[data-ui-theme="tavern"] .tv-toast{animation:none}html[data-ui-theme="tavern"] .tv-toast-clock{animation-name:none}} /* the Exchange paints its own tabs with an id rule: the same dark folders, at that weight */ html[data-ui-theme="tavern"] #exWin .ex-tabs button{background:linear-gradient(color-mix(in srgb,#6a5236 34%,#3a2816),color-mix(in srgb,#6a5236 18%,#22160c));color:#e6d2a6} html[data-ui-theme="tavern"] #exWin .ex-tabs button:hover{background:linear-gradient(color-mix(in srgb,#6a5236 44%,#4a3420),color-mix(in srgb,#6a5236 24%,#2a1c10));color:#f6e9cc} html[data-ui-theme="tavern"] #exWin .ex-tabs button[aria-pressed="true"]{background:linear-gradient(var(--tv-paper-hi),var(--tv-paper));color:var(--tv-ink);border-color:#5e4022;box-shadow:inset 0 4px 0 #6a5236} html[data-ui-theme="tavern"] #exWin .win-body>.ex-tabs button{font:600 15px/1 var(--tv-fh);letter-spacing:.02em} /* the bank's own selects and Move row, at the bank's id weight */ html[data-ui-theme="tavern"] #bankWin select.bk-kind{-webkit-appearance:none;appearance:none;padding:0 40px 0 10px;border:0;border-radius:6px;color:var(--tv-ink); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23fff'/%3E%3C/svg%3E") right 9px center/11px 7px no-repeat,linear-gradient(var(--tv-act-hi),var(--tv-act-dk)) right 0 top 0/30px 100% no-repeat,var(--tv-field); box-shadow:inset 0 0 0 2px var(--tv-fline),inset -32px 0 0 0 transparent,inset -32px 0 0 -30px var(--tv-fline)} html[data-ui-theme="tavern"] #bankWin select.bk-sortsel{padding-right:26px;background-size:9px 6px,22px 100%,auto;background-position:right 6px center,right 0 top 0,0 0} html[data-ui-theme="tavern"] .bk-amt button,html[data-ui-theme="tavern"] #bkX{flex:1 1 0;min-width:0;padding:0 2px}