body .game-library:has(.game-ligretto:not(.control-hidden)) {grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));}
body .game-ligretto .game-art {font-family:Georgia,serif;font-size:2.4rem;color:#f0d294;}
body .game-library:has(.game-ligretto:not(.control-hidden)):has(.game-poker:not(.control-hidden)) {grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));}
body .table-view[data-game="ligretto"]:not(.has-standings)[data-status="running"],body .table-view[data-game="ligretto"]:not(.has-standings)[data-status="finished"] {grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);}
body .table-view[data-game="ligretto"]:not(.has-standings) > .playmat {grid-column:1;grid-row:3;display:block;}
body .table-view[data-game="ligretto"] .hand-panel {display:none;}
body .table-view[data-game="ligretto"] .melds-area {padding:0;display:block;}
body .lg-panel {height:100%;min-height:0;min-width:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;gap:5px;max-width:900px;margin:auto;}
body .lg-notice {font-size:.82rem;color:#f4dfbb;line-height:1.25;min-height:1.25em;text-align:center;}
body .lg-opponents {display:flex;justify-content:center;gap:12px;font-size:.72rem;min-width:0;}
body .lg-opponents > span {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;}
body .lg-center {min-height:0;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));grid-auto-flow:column;gap:5px;padding:6px;border:1px solid #dcc49140;border-radius:10px;background:#18151a33;}
body .lg-card {display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(145deg,#fffcf1,#e8ddc5);border:1px solid #d3ba88;border-radius:6px;padding:2px;min-width:0;min-height:0;opacity:1;touch-action:manipulation;font:700 27px/1 Georgia,serif;box-shadow:0 2px 3px #0004;}
body .lg-card b {font:inherit;}
body .lg-card > span {font:700 15px/1 sans-serif;}
body .lg-card small {font:600 10px/1 sans-serif;}
body .lg-color-0 {color:#145592;} body .lg-color-1 {color:#b02b42;} body .lg-color-2 {color:#226743;} body .lg-color-3 {color:#8e6107;}
body .lg-target {flex-direction:row;gap:6px;min-width:0;min-height:0;max-height:80px;width:100%;align-self:stretch;}
body .lg-placeholder {border:1px dashed #e8d3a024;border-radius:5px;background:#eadac00a;display:flex;align-items:center;justify-content:center;opacity:.6;font-size:16px;}
body .lg-complete {background:#d3c8ad;}
body .lg-selected {outline:3px solid #ffe8a0;outline-offset:1px;transform:translateY(-2px);}
body .lg-fits {box-shadow:0 0 0 2px #fff1aa;}
body .lg-empty {background:#21191b66;color:#c2a77b;border:1px dashed #bba27566;box-shadow:none;}
body .lg-card:disabled {opacity:1;cursor:default;}
body .lg-actions,body .lg-draw {display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;}
body .lg-actions span,body .lg-draw span {font-size:.73rem;color:#dbc7a5;}
body .lg-actions button,body .lg-draw button {min-height:32px;padding:5px 15px;font-size:.82rem;}
body .lg-own {display:flex;justify-content:center;gap:12px;min-width:0;padding-top:5px;border-top:1px solid #bda16b66;}
body .lg-own small {display:block;font-size:.68rem;font-weight:400;color:#ead7b5;white-space:nowrap;margin-bottom:5px;}
body .lg-own .lg-card {width:56px;height:70px;}
body .lg-row > div {display:flex;gap:5px;}
body .lg-pile,body .lg-waste {flex:none;}
body .lg-spectator {grid-row:5/7;text-align:center;color:#dbc7a5;font-size:.75rem;}
body .lg-rules {grid-column:1/-1;margin:0;padding-left:20px;line-height:1.4;}
body .lg-rules li {margin-bottom:8px;}
body #rulesDialog:has(.lg-rules)[open] {display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:min(660px,calc(100dvh - 24px));}
body #rulesDialog:has(.lg-rules) .dialog-body {overflow-y:auto;min-height:0;}
@media(max-width:700px) and (orientation:portrait){
  body .game-library:has(.game-ligretto:not(.control-hidden)){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));}
  body .game-library:has(.game-ligretto:not(.control-hidden)):has(.game-poker:not(.control-hidden)){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));}
  body .game-library:has(.game-ligretto:not(.control-hidden)) .game-tile {display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 5px;padding:4px;text-align:left;justify-items:start;align-content:center;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) .game-art {grid-row:1/3;width:26px;height:30px;font-size:22px;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) :is(.game-ligretto,.game-zahlensteine) .game-art {font-size:11px;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) strong {font-size:.81rem;line-height:1.1;white-space:normal;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) small {font-size:.6rem;line-height:1.1;white-space:normal;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) .tile-action {display:none;}
  body .game-library:has(.game-ligretto:not(.control-hidden)):has(.game-poker:not(.control-hidden)) .game-tile {grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;}
  body .lg-own {gap:6px;} body .lg-own .lg-card{width:clamp(29px,10vw,52px);height:60px;}
  body .lg-row > div {gap:3px;} body .lg-own small{font-size:.6rem;}
  body .lg-notice {font-size:.75rem;} body .lg-center{gap:4px;padding:4px;}
  body .lg-target{gap:4px;font-size:23px;} body .lg-target > span{font-size:12px;} body .lg-target small{font-size:9px;}
}
@media(max-height:450px){
  body .game-library:has(.game-ligretto:not(.control-hidden)):has(.game-poker:not(.control-hidden)){grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));}
  body .game-library:has(.game-ligretto:not(.control-hidden)) .game-tile {display:flex;flex-direction:column;gap:2px;padding:3px;text-align:center;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) .game-art {width:26px;height:28px;font-size:22px;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) :is(.game-ligretto,.game-zahlensteine) .game-art {font-size:11px;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) strong {font-size:.75rem;line-height:1.1;}
  body .game-library:has(.game-ligretto:not(.control-hidden)) .tile-action {display:none;}
  body .lg-panel {grid-template-columns:minmax(0,1fr) minmax(210px,42%);grid-template-rows:auto auto minmax(0,1fr) auto;gap:4px;}
  body .lg-notice{grid-column:1/-1;font-size:.7rem;}
  body .lg-opponents{grid-column:1/-1;font-size:.63rem;}
  body .lg-center{grid-row:3;grid-column:1;gap:3px;padding:3px;}
  body .lg-actions{grid-row:4;grid-column:1;gap:4px;} body .lg-actions span{font-size:.6rem;}
  body .lg-own{grid-row:3;grid-column:2;flex-wrap:wrap;align-content:center;gap:5px;border:0;padding:0;}
  body .lg-row{order:3;width:100%;} body .lg-row > div{justify-content:center;gap:4px;}
  body .lg-own .lg-card{width:34px;height:42px;font-size:22px;} body .lg-own small{font-size:.58rem;margin-bottom:2px;text-align:center;}
  body .lg-own .lg-card > span{font-size:10px;} body .lg-pile,body .lg-waste{display:flex;align-items:center;gap:4px;}
  body .lg-draw{grid-row:4;grid-column:2;gap:5px;} body .lg-draw span{font-size:.6rem;}
  body .lg-actions button,body .lg-draw button{min-height:27px;padding:3px 7px;font-size:.68rem;}
  body .lg-target{font-size:18px;gap:3px;} body .lg-target > span{font-size:10px;} body .lg-target small{font-size:8px;}
  body .lg-spectator{grid-row:3;grid-column:2;align-self:center;}
}

/* Card faces: portrait proportions remain independent of the grid cell width. */
body .lg-panel {--lg-paper:#fffdf7;--lg-blue:#1764b0;--lg-red:#c03249;--lg-green:#24774e;--lg-yellow:#f1cb43;}
body .lg-color-0 {--lg-ink:var(--lg-blue);--lg-face-text:#fff;}
body .lg-color-1 {--lg-ink:var(--lg-red);--lg-face-text:#fff;}
body .lg-color-2 {--lg-ink:var(--lg-green);--lg-face-text:#fff;}
body .lg-color-3 {--lg-ink:var(--lg-yellow);--lg-face-text:#332807;}
body .lg-card {position:relative;box-sizing:border-box;aspect-ratio:2/3;border:3px solid var(--lg-paper);border-radius:6px;background:var(--lg-ink,var(--lg-paper));color:var(--lg-face-text,#333);font-family:Arial,sans-serif;box-shadow:0 1px 0 #ccc5b5,0 3px 0 #fffdf7,0 4px 0 #b6ac99,0 5px 5px #0005;gap:2px;}
body .lg-center {gap:8px;padding:8px;}
body .lg-target {width:auto;height:100%;max-height:110px;max-width:100%;justify-self:center;align-self:center;flex-direction:column;gap:1px;}
body .lg-placeholder {aspect-ratio:2/3;border:1px dashed #e8d3a050;box-sizing:border-box;}
body .lg-card .lg-corner {position:absolute;font:700 9px/1 Arial,sans-serif;}
body .lg-corner-top {top:3px;left:3px;}
body .lg-corner-bottom {bottom:3px;right:3px;transform:rotate(180deg);}
body .lg-card > b {font:700 27px/1 Arial,sans-serif;}
body .lg-card > span {font-size:11px;}
body .lg-card > small {position:absolute;bottom:3px;left:3px;font:600 8px/1 Arial,sans-serif;color:inherit;margin:0;}
body .lg-own .lg-card {width:52px;height:78px;}
body .lg-complete {filter:saturate(.65);}
body .lg-empty {background:#21191b66;color:#c2a77b;border:1px dashed #bba27566;box-shadow:none;}
body .lg-selected {outline:3px solid #ffe8a0;outline-offset:2px;}
body .lg-fits {outline:2px solid #fff1aa;outline-offset:2px;}
@media(max-width:700px) and (orientation:portrait){
 body .lg-own .lg-card{width:clamp(29px,9.5vw,48px);height:auto;aspect-ratio:2/3;}
 body .lg-card > b{font-size:23px;}
 body .lg-card .lg-corner{font-size:7px;}
 body .lg-corner-top{top:1px;left:1px;} body .lg-corner-bottom{bottom:1px;right:1px;}
}
@media(max-height:450px){
 body .lg-center{gap:6px;padding:5px;}
 body .lg-own .lg-card{width:32px;height:48px;}
 body .lg-card{border-width:2px;border-radius:4px;}
 body .lg-card > b{font-size:16px;}
 body .lg-card > span{font-size:7px;}
 body .lg-card .lg-corner{font-size:6px;}
 body .lg-corner-top{top:0;left:0;} body .lg-corner-bottom{bottom:0;right:0;}
 body .lg-card > small{font-size:6px;bottom:0;left:0;}
}

body button.lg-card:hover:not(:disabled) {background-color:var(--lg-ink,var(--lg-paper));}
body button.lg-empty:hover:not(:disabled) {background-color:#39272b;}