/* A personal landscape sits behind the existing game grid. Layout and hit targets stay untouched. */
#personal-table-backdrop{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(180deg,rgba(7,14,27,.35),rgba(7,14,27,.24) 42%,rgba(7,14,27,.8)),var(--feifei-bg-landscape);background-size:cover;background-position:center;filter:saturate(.78)}
body[data-table-background]:has(main.game) #personal-table-backdrop{display:block}
body[data-table-background] #app:has(>main.game){position:relative;z-index:1}
body[data-table-background] main.game>.board{background:radial-gradient(ellipse at 50% 35%,#122e404d,#0a1d3375 76%);box-shadow:inset 0 0 0 2px #d4c49860,inset 0 0 0 7px #111e3040,inset 0 0 0 8px #8db4bb36,inset 0 0 28px #06142140,0 0 0 4px #060c1940,0 0 0 5px #93acdf26,0 10px 24px #0004}
body[data-table-background] main.game>.hand-meta,body[data-table-background] main.game>.turn-message{color:#e3ebf5;text-shadow:0 1px 4px #000,0 0 10px #000b}
@media(orientation:portrait){#personal-table-backdrop{background-image:linear-gradient(180deg,rgba(7,14,27,.4),rgba(7,14,27,.25) 42%,rgba(7,14,27,.86)),var(--feifei-bg-portrait)}}

dialog[data-background-picker]{--bg-paper:#e6decf;--bg-muted:#adbed0;--bg-gold:#e7cf9f;--bg-line:#a6b9d532;width:min(980px,calc(100vw - 24px));max-width:980px;max-height:calc(100dvh - 24px);padding:0;overflow:hidden;background:#111c30;border:1px solid #9aabca4f;color:#e6edf5;border-radius:20px}
dialog[data-background-picker]>.close{position:absolute;right:14px;top:13px;z-index:4;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;background:#111c3099;border:1px solid #b4c3db30;color:#e8edf6;border-radius:50%;font-size:26px}
.bg-picker{display:flex;flex-direction:column;max-height:min(820px,calc(100dvh - 24px));font-size:14px;line-height:1.5}
.bg-picker button{touch-action:manipulation;min-height:44px;font:inherit;transition:background-color .16s,border-color .16s,color .16s;cursor:pointer}
.bg-picker button:focus-visible{outline:3px solid #a5dadd;outline-offset:3px;z-index:2}
.bg-picker button:disabled{cursor:wait;opacity:.5}
.bg-picker-heading{padding:25px 76px 20px 26px;border-bottom:1px solid var(--bg-line);flex-shrink:0}
.bg-picker-heading h2{font-family:"Songti SC","STSong",serif;font-size:clamp(20px,2.8vw,27px);line-height:1.35;color:var(--bg-paper);margin:0 0 6px;font-weight:700;letter-spacing:.3px;text-wrap:balance}
.bg-picker-heading p{margin:0;color:var(--bg-muted);font-size:13px}
.bg-picker-content{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px;padding:22px 26px;overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:#5b6a84 #111c30}
.bg-stage{align-self:start;position:sticky;top:0;min-width:0}
.bg-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#bac7d8;margin-bottom:10px}
.bg-orientation{display:flex;gap:8px}
.bg-orientation button{background:transparent;border:1px solid var(--bg-line);border-radius:7px;padding:6px 12px;color:var(--bg-muted);font-size:12px}
.bg-orientation button[aria-pressed=true]{color:var(--bg-gold);border-color:#e3c88e88;background:#e3c88e10}
.bg-preview{margin:0}
.bg-preview-viewport{height:230px;position:relative;overflow:hidden;border-radius:12px;background:#091422;box-shadow:inset 0 0 0 1px #b5c9d329,0 10px 30px #0003;isolation:isolate;transition:height .2s}
.bg-preview-image,.bg-preview-shade,.bg-preview-loading{position:absolute;inset:0}
.bg-preview-image{display:flex;justify-content:center;background:radial-gradient(ellipse,#1b3043,#091422)}
.bg-preview-image img{height:100%;width:100%;object-fit:cover;object-position:center;filter:saturate(.8)}
.bg-preview[data-orientation=portrait] .bg-preview-image{width:130px;left:50%;transform:translateX(-50%);box-shadow:0 0 0 1px #90a9bf55}
.bg-preview[data-orientation=portrait] .bg-preview-image img{object-fit:cover}
.bg-preview-shade{background:linear-gradient(180deg,#06101b10,#06101b66);pointer-events:none}
.bg-preview-table{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:66%;height:47%;max-width:225px;pointer-events:none;display:grid;place-items:center}
.bg-preview-felt{height:100%;width:100%;border-radius:50%;border:2px solid #dfd1a770;box-shadow:inset 0 0 0 3px #15283c,0 8px 20px #0005;background:#0e273970;position:relative;display:flex;justify-content:center;align-items:center;isolation:isolate}
.bg-preview-felt>span{position:absolute;left:0;right:0;top:13%;font:13px "Songti SC",serif;letter-spacing:3px;text-align:center;color:#b9d7de66}
.bg-preview-felt>i{width:28px;height:40px;border-radius:3px;background:#ffffff;box-shadow:0 2px 4px #0005;transform:translateY(6px) rotate(-8deg);padding:3px 4px;color:#17314d;font:bold 14px Georgia,serif;font-style:normal;line-height:1}
.bg-preview-felt>i+i{transform:translate(-3px,6px) rotate(8deg)}
.bg-preview-felt>i.red{color:#ad3655}
.bg-preview-felt small{display:block;font-size:13px;margin-top:3px}
.bg-preview[data-orientation=portrait] .bg-preview-table{width:92px;height:72px}
.bg-preview[data-orientation=portrait] .bg-preview-felt>span{font-size:8px;letter-spacing:1px;top:7%}
.bg-preview[data-orientation=portrait] .bg-preview-felt>i{width:20px;height:29px;font-size:10px;padding:3px}
.bg-preview[data-orientation=portrait] .bg-preview-felt small{font-size:10px;margin-top:1px}
.bg-preview-loading{display:grid;place-items:center;text-align:center;font-size:13px;color:#d7e6ee;background:#0c1c2ae6;padding:20px;z-index:2}
.bg-picker [hidden]{display:none!important}
.bg-preview.is-classic .bg-preview-image{background:radial-gradient(ellipse,#2b4a5c,#111f36)}
.bg-preview figcaption{padding:16px 0 0}
.bg-preview-name{font:600 20px/1.4 "Songti SC","STSong",serif;color:var(--bg-paper);margin:0 0 9px;text-wrap:balance}
.bg-tags{display:flex;flex-wrap:wrap;gap:6px}
.bg-tags>span{font-size:11px;line-height:1.6;padding:3px 7px;background:#a0bbd00d;border:1px solid #9bb5ca2e;border-radius:4px;color:#c2d0df}
.bg-preview-note{font-size:12px;line-height:1.7;color:var(--bg-muted);margin:10px 0 0}
.bg-preview-error{padding:12px;margin-top:10px;border-left:2px solid #dfbb80;background:#d4aa720a;border-radius:0 7px 7px 0}
.bg-preview-error p{font-size:12px;line-height:1.7;margin:0 0 8px;color:#ead6b4}
.bg-preview-error button{color:#efdcbb;border:1px solid #dfc59466;background:#d9b77710;padding:7px 13px;border-radius:7px;font-size:12px}
.bg-gallery{min-width:0}
.bg-categories{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.bg-categories button{padding:8px 12px;border:1px solid var(--bg-line);border-radius:8px;color:var(--bg-muted);background:transparent;font-size:13px}
.bg-categories button[aria-pressed=true]{background:#d9c195;color:#202739;border-color:#efd7aa;box-shadow:inset 0 1px 0 #fff7}
.bg-gallery-summary{font-size:11px;line-height:1.6;color:#9cadc4!important;margin:0 0 12px}
.bg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.bg-grid .bg-tile{display:flex;flex-direction:column;position:relative;text-align:left;padding:0 0 7px;border:1px solid transparent;background:transparent;color:#dce5ee;border-radius:9px;min-width:0;overflow:hidden;box-shadow:none}
.bg-tile-art{display:block;width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:7px;background:#192d41;border:1px solid #9ab3d334}
.bg-tile img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.8);transition:filter .16s}
.bg-tile-name{display:block;padding:8px 7px 0;font-size:12px;line-height:1.5;color:#dce5ef;width:100%;white-space:normal;overflow-wrap:anywhere}
.bg-tile-tags{display:block;padding:3px 7px 0;font-size:10px;line-height:1.5;color:#9bafc5}
.bg-tile-current{position:absolute;left:6px;top:6px;background:#0b1728d9;border:1px solid #b0d3d15e;border-radius:4px;color:#d0ecea;font-size:10px;padding:2px 6px;line-height:1.5}
.bg-tile-check{display:none;position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:50%;background:#eed5a1;color:#20283b;font-size:14px;line-height:22px;text-align:center;box-shadow:0 2px 8px #0004}
.bg-grid .bg-tile.is-selected{border-color:#d7bd86b3;background:#dac1960d}
.bg-tile.is-selected .bg-tile-check{display:block}
.bg-tile.is-selected .bg-tile-art{border-color:#dcc28d}
.bg-tile-classic .bg-tile-art{display:grid;place-items:center;background:radial-gradient(ellipse,#284756,#13263d);color:#d4c79d}
.bg-tile-classic svg{width:70%;height:80%}
.bg-thumb-error{position:absolute;inset:0;display:grid;place-items:center;color:#b3c1d2;font-size:11px;padding:8px;text-align:center}
.bg-custom{padding:26px 17px;border:1px solid #d9c08e33;border-radius:12px;text-align:center;background:#d9c08e04;line-height:1.8}
.bg-custom-mark{color:#c9bc94;max-width:130px;margin:auto}
.bg-custom h3{font:20px "Songti SC",serif;color:#e2d7c0;margin:12px 0}
.bg-custom p{font-size:13px;color:#aebfd1!important}
.bg-custom button{margin-top:10px;background:transparent;border:1px solid #d9c08e70;border-radius:8px;color:#ead4aa;padding:8px 14px}
.bg-picker-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 26px max(14px,env(safe-area-inset-bottom));background:#101b2e;border-top:1px solid var(--bg-line);box-shadow:0 -8px 24px #070e1b55;flex-shrink:0;z-index:3}
.bg-picker-actions>div:last-child{display:flex;gap:10px;flex-shrink:0}
.bg-selection-status{font-size:12px;line-height:1.5;color:#b7c8da;max-width:45%;overflow-wrap:anywhere}
.bg-picker-actions button{padding:10px 16px;border:1px solid #9fb3d23d;background:#1b2a43;color:#d8e2ef;border-radius:8px;font-size:13px}
.bg-picker-actions .primary{background:linear-gradient(110deg,#efdbb1,#d3ae70);color:#252a38;border-color:#e9cf9b;font-weight:600;min-width:120px}
@media(hover:hover){.bg-grid .bg-tile:hover{background:#b4cadd0c}.bg-tile:hover img{filter:saturate(.95)}.bg-categories button:not([aria-pressed=true]):hover{background:#9cb8d312}}
@media(max-width:620px){dialog[data-background-picker]{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}.bg-picker{max-height:calc(100dvh - 16px)}.bg-picker-heading{padding:21px 65px 16px 18px}.bg-picker-heading h2{font-size:22px}.bg-picker-heading p{font-size:12px}.bg-picker-content{grid-template-columns:minmax(0,1fr);padding:15px 18px 20px;gap:22px}.bg-stage{position:static}.bg-preview-viewport{height:180px}.bg-preview[data-orientation=portrait] .bg-preview-image{width:101px}.bg-preview figcaption{padding-top:12px}.bg-preview-name{font-size:19px}.bg-grid{gap:12px 10px}.bg-categories{gap:8px}.bg-categories button{font-size:12px;padding:8px 10px;flex:1 0 calc(50% - 8px)}.bg-picker-actions{padding:12px 14px max(12px,env(safe-area-inset-bottom));gap:8px;flex-wrap:wrap}.bg-selection-status{max-width:100%;width:100%;font-size:11px}.bg-picker-actions>div:last-child{width:100%;gap:10px}.bg-picker-actions button{flex:1;padding:10px 8px}.bg-preview-toolbar{margin-bottom:8px}}
@media(max-height:520px) and (orientation:landscape){dialog[data-background-picker]{max-height:calc(100dvh - 12px);width:min(980px,calc(100vw - 20px))}.bg-picker{max-height:calc(100dvh - 12px)}.bg-picker-heading{padding:14px 70px 10px 20px}.bg-picker-heading h2{font-size:21px;margin-bottom:3px}.bg-picker-heading p{font-size:11px}.bg-picker-content{padding:12px 20px 16px;gap:20px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.bg-preview-viewport{height:146px}.bg-preview[data-orientation=portrait] .bg-preview-image{width:82px}.bg-preview-name{font-size:17px}.bg-preview figcaption{padding-top:10px}.bg-preview-note{font-size:11px}.bg-categories button{font-size:11px;padding:6px 9px}.bg-gallery-summary{font-size:10px}.bg-picker-actions{padding:10px 20px max(10px,env(safe-area-inset-bottom));flex-wrap:nowrap}.bg-selection-status{max-width:40%;width:auto}.bg-picker-actions>div:last-child{width:auto}.bg-picker-actions button{flex:initial;min-height:44px}.bg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bg-tile-art{aspect-ratio:2/1}.bg-tile-name{font-size:11px}}
@media(prefers-reduced-motion:reduce){.bg-picker *{transition:none!important}}
/* Keep the compact game header on one line at small phone widths. */
@media(max-width:360px){#app:has(>main.game)>.topbar{gap:6px;padding-inline:12px}#app:has(>main.game)>.topbar .brand{gap:5px;flex-shrink:0;white-space:nowrap}#app:has(>main.game)>.topbar .brand b{font-size:15px;letter-spacing:.25px;white-space:nowrap}#app:has(>main.game)>.topbar .header-actions{gap:6px;min-width:0}#app:has(>main.game)>.topbar .status{font-size:10px;max-width:87px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#app:has(>main.game)>.topbar #table-settings{padding:5px 8px;min-height:44px}}

/* Let the destination show through while keeping player information on readable backplates. */
body[data-table-background] main.game .opponent b{background:#071426bf;border-radius:4px;text-shadow:0 1px 3px #000;box-shadow:0 0 0 3px #071426bf}
body[data-table-background] main.game .trick-label{background:#071525c7;color:#f1f5fc;border-color:#b1c8df50}
body[data-table-background] main.game .seat-action{color:#e1eaf6;text-shadow:0 1px 4px #000,0 0 7px #000b}
body[data-table-background] main.game .board::before{opacity:.2}body[data-table-background] main.game .table-orbit{border-color:#bddce326}
.bg-picker-heading h2,.bg-preview-name,.bg-custom h3{font-family:var(--font-ui);letter-spacing:0;font-weight:700}.bg-preview-name{font-size:19px;line-height:1.4}

body[data-table-background] main.game>.tribute-panel{background:#101e32c7;border-color:#b9c9da66}

@media(max-width:360px) and (orientation:portrait){#app:has(>main.game)>.topbar{height:45px;min-height:45px}}