/* Compact table: artwork is large; surrounding controls stay small. */
.table{max-width:1600px;padding:12px 20px 20px}
.top{min-height:62px;padding:10px 24px}.brand{font-size:30px}.brand span{font-size:25px}.brand small{font-size:8px}
.table-heading{margin:0 0 10px;gap:12px;flex-wrap:wrap}.table-identity{display:flex;align-items:center;gap:10px;color:#713b4d}.table-identity strong{font:20px Georgia}.table-identity>span{font-size:9px;letter-spacing:1px;color:#9e7d72}
.player-strip{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}.player-chip{display:flex;align-items:center;gap:6px;background:#fff7ea;border:1px solid #ddc8b4;border-radius:20px;padding:6px 10px;font-size:11px}.player-chip.active{border-color:#a96879;background:#71384e;color:#ffedd3;box-shadow:0 0 0 2px #ba839329}.player-chip i{width:5px;height:5px;border-radius:50%;background:#bfaba4}.player-chip i.online{background:#96a67c}.player-chip small{padding-left:4px;opacity:.7}.connection-invite button{padding:7px 10px;font-size:11px}
.score-strip{gap:7px;margin-bottom:10px}.score-family{padding:7px 12px;gap:9px;border-radius:9px;min-height:48px}.score-family .trait{width:25px;height:31px}.score-family b{font-size:24px}.score-family .name{font-size:11px}
.family-album{margin:0 0 10px;min-width:0}.generation-nav{gap:5px;margin-bottom:7px}.generation-nav>button{padding:7px 10px;gap:8px;min-width:110px;border-radius:8px;font-size:11px}.generation-nav small{font-size:9px;margin-top:2px}.generation-nav .roman{font-size:23px}.generation-nav .all-generations{max-width:130px}.album{padding:12px 14px;box-shadow:0 4px 16px #6f423010;border-radius:10px;max-height:calc(100dvh - 365px);min-height:285px;overflow-y:auto;overflow-x:hidden}.album:before,.album:after{display:none}
.generation{margin-bottom:14px;padding-bottom:14px;min-width:0}.generation-head{margin-bottom:5px;padding:0}.generation-head h3{font-size:21px;margin:2px 0}.generation-head .eyebrow{font-size:8px}.generation-note{font-size:10px;line-height:1.4}.generation-note small{display:none}.portrait-rail{padding:9px 1px 3px}.row{gap:10px;padding:0}.pair-wrap{width:300px;padding:6px;border-radius:9px}.pair,.archived .pair{height:229px;min-height:0}.pair .live-portrait,.archived .pair img{width:155px;height:218px}.pair .live-portrait+.live-portrait{width:155px;height:218px;margin-left:-22px;margin-top:7px}.pair .live-portrait img{width:100%;height:100%}.pair img+img{margin-left:-22px;margin-top:7px;width:155px;height:218px}.portrait-caption{margin-top:3px;min-height:17px;font-size:10px}.table-inspect .inspect{font-size:10px;padding:2px}.target-action{padding:6px;margin-top:4px;font-size:11px}.parent-reference{margin:3px 0 0;font-size:9px}.empty-slot,.empty-generation .empty-slot{width:115px;height:245px;background:#efdfcb35;border-radius:9px}.empty-slot span{font-size:35px}.empty-slot small{font-size:9px}.parent-nav{font-size:10px;padding:4px 8px;margin:0}
.play-dock{display:block;position:sticky;bottom:6px;z-index:10;margin-top:10px;border-radius:12px;box-shadow:0 8px 28px #38212d25;background:#442936;border:1px solid #8d626b;overflow:visible}
.hand-panel{padding:10px 16px 5px;border:0;border-radius:12px 12px 0 0;background:#442936;position:static;box-shadow:none;margin:0}.hand-head{gap:14px;margin:0;justify-content:flex-start;flex-wrap:wrap}.hand-title{display:flex;gap:8px;align-items:center}.hand-head h3{font-size:19px;white-space:nowrap}.hand-title .tiny{display:inline-block;font:12px 'DM Sans',sans-serif;background:#ffffff18;border-radius:10px;padding:2px 6px;color:#efd3b4}.hand-cost{font-size:10px;color:#caab9e}.hand-secret{display:flex;gap:7px;align-items:center;border-left:3px solid var(--family-color);padding:3px 10px;background:#fff2ce0c;border-radius:5px}.hand-secret .trait{width:27px;height:34px}.hand-secret .trait img{mix-blend-mode:normal}.hand-secret small{display:block;font-size:8px;letter-spacing:.7px;color:#ceb0a1}.hand-secret strong{display:block;font-size:13px;color:#ffe7b8;margin-top:2px}.hand-turn{margin-left:auto;font-size:11px;color:#ccb3a7}.hand-turn.my-turn{color:#f5d49b}
.hand{display:flex;justify-content:center;gap:0;padding:13px 4px 5px;overflow:visible;min-height:215px}.hand-card{display:block;flex:0 1 158px;min-width:42px;margin:0;transition:transform .18s ease;position:relative}.hand-card:last-child{flex:0 0 166px}.hand-card>button:first-child{width:166px;padding:0;border:2px solid #bea07a70;border-radius:5px;transition:border-color .18s,box-shadow .18s,transform .18s;outline-offset:2px;background:#f0dfc5}.hand-card .live-portrait,.hand-card img{width:162px;height:228px}.hand-card .live-portrait>img{width:100%;height:100%}.hand-card.illegal>button:first-child{filter:none;opacity:1}.hand-card.selected>button:first-child{border-color:#ffe2a0;box-shadow:0 0 0 3px #ffdb8f50,0 0 22px #ffcc7540;transform:none}.hand-card.selected{transform:translateY(-8px);z-index:8}.hand-card:hover,.hand-card:focus-within{transform:translateY(-5px);z-index:9}.hand-card.selected:before{display:none}.hand-card.selected:after{content:'✓';position:absolute;top:-7px;right:8px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#ffe4ab;color:#542637;font-size:12px;z-index:4;box-shadow:0 2px 5px #0003}.hand-card>button:disabled{opacity:1}
.action-panel{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 14px;background:#38222e;color:#f1d5b9;border:0;border-top:1px solid #9c707440;border-radius:0 0 12px 12px;min-height:44px}.action-guidance{font-size:11px;flex:1;min-width:180px;color:#e3c6b4;line-height:1.4}.action-buttons,.target-shortcuts{display:flex;align-items:center;gap:7px}.action-panel button{margin:0;padding:6px 9px;width:auto;font-size:10px;max-width:none;background:#fff5db0f;color:#f2d9ba;border-color:#a17c6850;border-radius:6px}.target-shortcuts b{display:inline-block;margin-left:4px;color:#ffdca0}.action-panel .tiny{color:#bfa497;font-size:9px;white-space:nowrap}.social-panels{gap:10px;margin-top:12px}.social-panels>.panel{padding:12px 15px}.social-panels summary{font-size:12px}
.generation-transition{animation:generationFade .22s ease-out}.card-arriving{animation:cardLand .55s cubic-bezier(.2,.8,.25,1) both}.action-arrival{box-shadow:0 0 0 2px #cda66670,0 0 20px #e3bb7830}.score-gain{animation:scoreFloat 1.1s ease-out both}.in-love{animation-duration:8s!important}.marriage-hearts{pointer-events:none}.lineage-show{display:none}
@keyframes generationFade{from{opacity:.6}to{opacity:1}}@keyframes cardLand{from{opacity:0;transform:translateY(-24px) rotate(-4deg) scale(.95)}70%{transform:translateY(2px) rotate(1deg)}to{opacity:1;transform:none}}@keyframes scoreFloat{from{opacity:1;transform:translateY(5px)}to{opacity:0;transform:translateY(-25px)}}
/* Winning history uses the same portraits and the recorded parent links. */
.family-history{margin:20px 0;border:1px solid #c9a267;border-radius:14px;background:linear-gradient(120deg,#fff6e3,#ead7bd);text-align:left;overflow:hidden}.history-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;flex-wrap:wrap;border-bottom:1px solid #d3b78e}.history-heading>div:first-child{display:flex;align-items:center;gap:12px}.history-heading .trait{width:39px;height:46px}.history-heading small{font-size:10px;color:#956b58}.history-heading h2{font-size:23px;margin:4px 0 0}.history-controls{display:flex;gap:6px;flex-wrap:wrap}.history-controls button{padding:7px 10px;font-size:11px}.history-progress{display:flex;align-items:center;gap:7px;padding:10px 18px;background:#efe1ca}.history-progress button{padding:5px 11px;font:16px Georgia;border-radius:20px;background:transparent;color:#9e8973;border-color:#ccb69a}.history-progress button.lit{background:#71384c;color:#ffdf9e;border-color:#ad8555}.history-progress>span{font-size:12px;color:#8e6453;margin-left:auto}.history-progress>span b{font-size:18px;color:#653044;margin-left:8px}.history-viewport{max-height:560px;overflow:auto;scrollbar-color:#b38f67 #eedcc4;position:relative;overscroll-behavior:contain}.history-tree{position:relative;min-width:1300px;padding:20px 20px 15px}.history-generation{position:relative;z-index:1;padding:0 0 55px;margin:0;opacity:.3;transition:opacity .45s}.history-generation:last-child{padding-bottom:15px}.history-generation.history-visible{opacity:1}.history-gen-label{display:flex;align-items:center;justify-content:center;gap:9px;color:#8c6a58;margin-bottom:10px;font-size:11px}.history-gen-label>b{font:21px Georgia;color:#8b4b5d}.history-points{color:#764232;background:#f6d99c;padding:3px 8px;border-radius:20px;animation:unseal .4s both}.history-row{display:flex;justify-content:center;align-items:start;gap:13px}.history-node{position:relative;flex:0 0 164px;opacity:.25;filter:saturate(.3);transition:opacity .4s,filter .4s}.history-visible .history-ancestor{opacity:1;filter:none}.history-portraits{display:flex;justify-content:center;gap:2px;align-items:start;position:relative}.history-card{display:block}.history-card .live-portrait{width:85px;height:120px;border:2px solid #c9b491;border-radius:4px;box-shadow:0 3px 10px #5a302825}.history-card img{width:100%;height:100%;object-fit:contain}.history-visible .family-member .live-portrait{border-color:var(--family-color);box-shadow:0 0 0 2px #fff2d0,0 0 18px color-mix(in srgb,var(--family-color),transparent 40%)}.history-visible .family-context{opacity:.65}.history-current .family-member{animation:historyBloom .6s both}.history-card-score{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);background:#613346;color:#ffe3ae;font-size:12px;padding:3px 9px;border-radius:14px;border:1px solid #c6a062;z-index:2}.history-lines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}.history-branch{fill:none;stroke:#ccb492;stroke-width:2;opacity:.2;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}.history-branch.drawn{stroke:var(--family-color);stroke-width:3;stroke-dashoffset:0;opacity:.85;filter:drop-shadow(0 0 4px var(--family-color))}.history-branch.drawing{animation:branchDraw .9s ease-out both}.history-caption{padding:10px 18px;margin:0;font-size:12px;color:#916a54;background:#f4e7d3}.history-finale{display:flex;justify-content:center;align-items:center;gap:25px;padding:45px 20px 25px;background:radial-gradient(ellipse,#ffe4a980,transparent);border-top:1px solid #d3b78e;animation:historyBloom .7s both}.history-champion{position:relative}.history-champion>.family-crown{position:absolute;top:-33px;left:50%;transform:translateX(-50%);width:72px;z-index:3}.history-champion .live-portrait{width:155px;height:218px;border:3px solid #d4ad65;border-radius:5px;box-shadow:0 10px 25px #69394830}.history-champion img{width:100%;height:100%;object-fit:contain}.history-finale h2{font-size:32px;margin:8px 0}.history-finale p{font-size:17px;margin:5px 0;color:#794759}.history-finale p strong{font:32px Georgia}.history-finale small{font-size:11px;color:#957160}.history-finale .trait{width:32px;height:40px}.result-panel{margin-top:20px;max-width:1400px}.result-panel>h1{font-size:30px;margin:12px auto}.reveal-emblem{font-size:45px}.reveal-controls{margin:12px}.results{margin:18px 0;gap:10px}.result{padding:18px;gap:15px}.result h3{font-size:21px}.result-avatar,.result-avatar img{width:82px}.result-avatar .family-crown{left:10px;width:62px}.result-panel>.primary{padding:12px 20px;font-size:14px}
@keyframes branchDraw{from{stroke-dashoffset:1;opacity:.2}to{stroke-dashoffset:0;opacity:.85}}@keyframes historyBloom{from{opacity:.4;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@media(min-width:1450px) and (min-height:850px){.hand-card{flex-basis:170px}.hand-card:last-child{flex-basis:180px}.hand-card>button:first-child{width:180px}.hand-card .live-portrait,.hand-card img{width:176px;height:248px}.album{max-height:calc(100dvh - 395px)}}
@media(max-width:800px){.top{padding:9px 12px;gap:8px}.brand span{font-size:23px}.top-controls{gap:4px}.top-controls button{font-size:10px;padding:6px}.table{padding:10px 8px 15px}.table-heading{gap:7px}.table-identity strong{font-size:17px}.table-identity>span{font-size:8px}.player-strip{order:2;flex-basis:100%;justify-content:flex-start;gap:4px}.player-chip{font-size:10px;padding:4px 7px}.connection-invite{margin-left:auto;flex-direction:row;align-items:center}.connection-invite button{font-size:9px;padding:6px}.score-family{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:5px 2px;gap:3px;min-height:52px}.score-family .trait{width:20px;height:25px}.score-family .name{font-size:8px;flex-basis:100%;order:2;text-align:center}.score-family b{font-size:20px}.score-strip{gap:4px;margin-bottom:8px}.generation-nav{margin-bottom:5px;padding-bottom:4px}.generation-nav>button{min-width:108px;padding:6px 8px;font-size:10px}.generation-nav .roman{font-size:22px}.album{padding:9px;min-height:250px;max-height:360px}.generation-head h3{font-size:18px}.generation-note{font-size:9px;max-width:140px}.pair-wrap{width:270px;padding:5px}.pair,.archived .pair{height:208px}.pair .live-portrait,.archived .pair img{width:143px;height:201px}.pair .live-portrait+.live-portrait{width:143px;height:201px;margin-left:-23px;margin-top:5px}.pair img+img{width:143px;height:201px;margin-left:-23px;margin-top:5px}.empty-slot,.empty-generation .empty-slot{width:70px;height:223px}.empty-slot small{display:none}.hand-panel{padding:9px 8px 4px}.hand-head{gap:8px}.hand-head h3{font-size:17px}.hand-title{gap:5px}.hand-cost{font-size:8px}.hand-secret{padding:2px 6px;gap:4px}.hand-secret .trait{width:22px;height:27px}.hand-secret strong{font-size:12px}.hand-secret small{font-size:7px}.hand-turn{flex-basis:100%;text-align:right;font-size:9px;margin-top:-3px}.hand{padding:12px 1px 4px;min-height:202px;justify-content:flex-start}.hand-card{flex:1 1 0;min-width:0}.hand-card:last-child{flex:0 0 137px}.hand-card>button:first-child{width:137px}.hand-card .live-portrait,.hand-card img{width:133px;height:187px}.hand-card.selected:after{right:auto;left:4px;width:18px;height:18px;top:-9px}.play-dock{bottom:3px;margin-top:8px}.action-panel{padding:7px 9px;gap:5px;min-height:42px}.action-guidance{font-size:10px;min-width:155px}.action-buttons,.target-shortcuts{gap:4px;flex-wrap:wrap}.action-panel button{font-size:9px;padding:5px 7px}.action-panel .tiny{font-size:8px}.social-panels{grid-template-columns:1fr;margin-top:8px}.history-heading{padding:12px;gap:10px}.history-heading h2{font-size:20px}.history-heading .trait{width:31px;height:38px}.history-controls button{padding:6px 8px;font-size:10px}.history-progress{padding:8px 12px;gap:4px;flex-wrap:wrap}.history-progress button{padding:4px 9px;font-size:15px}.history-progress>span{font-size:10px}.history-viewport{max-height:450px}.history-tree{min-width:1300px}.history-finale{gap:16px;padding:38px 13px 22px}.history-champion .live-portrait{width:120px;height:169px}.history-finale h2{font-size:24px}.history-finale p{font-size:13px}.history-finale p strong{font-size:27px}.history-finale small{font-size:9px}.result-panel{padding:0 9px}.result-panel>h1{font-size:24px}.history-caption{font-size:10px;padding:10px 12px}}
@media(max-height:700px) and (min-width:801px){.hand-card>button:first-child{width:145px}.hand-card:last-child{flex-basis:145px}.hand-card .live-portrait,.hand-card img{width:141px;height:198px}.hand{min-height:205px}.album{min-height:250px;max-height:270px}}
@media(prefers-reduced-motion:reduce){.card-arriving,.generation-transition,.score-gain,.history-branch.drawing,.history-current .family-member,.history-finale{animation:none}.history-generation,.history-node,.hand-card{transition:none}}
.calm-motion .card-arriving,.calm-motion .generation-transition,.calm-motion .history-branch.drawing,.calm-motion .history-current .family-member,.calm-motion .history-finale{animation:none}

/* Keep the entire hand alongside the album instead of covering the board. */
@media(min-width:1000px){
 .table{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:10px 14px;align-items:start}
 .table-heading,.score-strip,.social-panels{grid-column:1/-1;margin:0}
 .family-album{grid-column:1;margin:0}.play-dock{grid-column:2;position:sticky;top:10px;bottom:auto;margin:0}
 .album{max-height:calc(100dvh - 250px);min-height:480px}
 .generation-nav{flex-wrap:wrap;gap:5px}.generation-nav>button{flex:1 1 28%;min-width:90px}.generation-nav .all-generations{flex:1 1 28%;max-width:none}
 .hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 0;padding:15px 2px 8px;min-height:0;justify-items:start}
 .hand-card,.hand-card:last-child{width:145px;min-width:0;flex:none}.hand-card>button:first-child{width:145px}.hand-card .live-portrait,.hand-card img{width:141px;height:198px}
 .hand-head{gap:8px}.hand-title{flex-basis:100%}.hand-turn{font-size:10px}.hand-panel{padding:10px 12px 5px}.action-panel{padding:9px 12px}.action-guidance{flex-basis:100%;min-width:0}.action-buttons{margin-left:auto}.target-shortcuts{flex-wrap:wrap}
}
@media(min-width:1450px) and (min-height:850px){.table{grid-template-columns:minmax(0,1fr) 500px}.hand-card,.hand-card:last-child{width:166px}.hand-card>button:first-child{width:166px}.hand-card .live-portrait,.hand-card img{width:162px;height:228px}}
@media(max-width:999px){.play-dock{position:static;bottom:auto}.album{max-height:390px}.hand{justify-content:center;gap:0}.hand-card{flex:0 1 145px}.hand-card:last-child{flex:0 0 145px}.hand-card>button:first-child{width:145px}.hand-card .live-portrait,.hand-card img{width:141px;height:198px}}
@media(max-width:550px){.hand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 0;justify-items:start;padding:14px 0 7px}.hand-card,.hand-card:last-child{width:121px;min-width:0}.hand-card>button:first-child{width:121px}.hand-card .live-portrait,.hand-card img{width:117px;height:165px}.hand-panel{padding:9px 8px 4px}.hand-turn{flex-basis:auto;margin-top:0}.hand-title{flex-basis:100%}.action-guidance{flex-basis:100%}.action-buttons{margin-left:auto}.album{max-height:280px}.generation-nav{margin-bottom:5px}.history-champion .live-portrait img{height:100%;width:100%}}
.pair-wrap.single-person{width:170px}@media(min-width:1000px){.album{min-height:0}}@media(max-width:800px){.pair-wrap.single-person{width:156px}}@media(max-width:550px){.hand-card,.hand-card:last-child{width:min(121px,calc((100vw - 40px)/3))}.hand-card>button:first-child{width:100%}.hand-card .live-portrait{width:100%;height:auto;aspect-ratio:100/140.6}.hand-card .live-portrait>img{width:100%;height:100%}.hand-card img{width:100%;height:auto}.hand{min-height:0}}
.hand-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center}.hand-title{grid-column:1;grid-row:1;display:flex;flex-wrap:wrap;gap:5px 8px}.hand-pass{grid-column:2;grid-row:1;min-width:144px;min-height:48px;padding:8px 15px;background:linear-gradient(#ffe9bd,#e8c58d);color:#542d3d;border:1px solid #d0a467;border-radius:8px;box-shadow:0 3px 9px #160d2230;font-size:14px;text-align:center;line-height:1.25}.hand-pass:hover:not(:disabled){background:#ffedc8;color:#542d3d;box-shadow:0 4px 14px #f3c87d30;transform:translateY(-1px)}.hand-pass small{display:block;font-size:10px;color:#926840;margin-top:3px}.hand-secret{grid-column:1;grid-row:2;width:max-content}.hand-turn{grid-column:2;grid-row:2;flex-basis:auto;margin:0;text-align:right}.hand-card.selected{transform:translateY(-11px);z-index:10}.hand-card.selected>button:first-child{outline:2px solid #ffda88;outline-offset:2px;box-shadow:0 0 0 6px #f3c77720,0 8px 24px #11081860,0 0 25px #ffd88b40}.hand-card.selected:after{content:'✓ ' attr(data-selected-label);top:auto;bottom:7px;left:50%;right:auto;transform:translateX(-50%);width:auto;min-width:78px;height:24px;padding:3px 9px;border-radius:6px;font-size:10px;font-weight:700;background:#ffe4ad;color:#552637;white-space:nowrap;pointer-events:none}.hand.has-selection .hand-card:not(.selected)>button{filter:saturate(.85);opacity:.88}.hand.has-selection .hand-card:not(.selected):hover>button{filter:none;opacity:1}.hand-card.selected:hover,.hand-card.selected:focus-within{transform:translateY(-11px)}.action-panel #cancel{min-height:36px;padding:8px 12px;font-size:11px}.hand{padding-top:18px}
@media(max-width:550px){.hand-pass{min-width:132px;min-height:46px;font-size:13px;padding:8px 10px}.hand-title{gap:4px}.hand-cost{flex-basis:100%;text-align:left}.hand-turn{font-size:9px}.hand-card.selected:after{min-width:65px;font-size:9px;height:22px;padding:3px 6px}.hand-panel{padding-top:11px}.hand-head{gap:8px}}
.hand-pass:disabled{opacity:.55;box-shadow:none}.action-panel{min-height:58px}@media(min-width:1000px){.hand{max-height:calc(100dvh - 320px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#b9916b #523242;padding-right:3px}}