/* E table: the same controls and projected cards, with a separate reversible layout. */
#app .single-table.gui-modern.gui-modern{
 --modern-gap:6px;--modern-hand:132px;--modern-own:244px;--modern-op:244px;
 display:grid;width:100%;max-width:640px;height:max(820px,calc(100 * var(--ui-vh,1dvh)));min-height:820px;max-height:none;
 grid-template-columns:minmax(0,1fr);grid-template-rows:32px var(--modern-op) minmax(160px,1fr) var(--modern-own) var(--modern-hand);
 gap:var(--modern-gap);padding:4px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
 color:#f3ead0;box-sizing:border-box;
}
#app .single-table.gui-modern.gui-modern .table-arena{display:contents}
#app .single-table.gui-modern.gui-modern .topbar{grid-area:1/1/2/-1;margin:0;min-height:0;gap:10px;padding:0 3px;justify-content:center}
#app .single-table.gui-modern.gui-modern .topbar .iconbutton{position:static;min-width:32px;min-height:32px;font-size:21px;margin-left:auto;padding:2px}
#app .single-table.gui-modern.gui-modern .wordmark{font-size:17px;margin-right:auto}
#app .single-table.gui-modern.gui-modern .round,#app .single-table.gui-modern.gui-modern .top-stock{font-size:12px}
#app .single-table.gui-modern.gui-modern .opponents{display:grid;grid-area:2/1/3/-1;grid-template-columns:repeat(var(--players),minmax(0,1fr));gap:6px;min-height:0}
#app .single-table.gui-modern.gui-modern .opponent[data-player-seat]{
 display:grid;grid-area:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:48px minmax(0,1fr);grid-template-areas:'heading' 'paper';
 min-width:0;min-height:0;height:auto;align-self:stretch;padding:3px;gap:2px;border:1px solid #ad965e;border-radius:12px;
 background:linear-gradient(125deg,#173f32ee,#0b2c25f2);box-shadow:inset 0 0 16px #041b1460,0 2px 6px #001a1250;overflow:hidden;
}
#app .single-table.gui-modern.gui-modern .opponent .opponent-heading{
 grid-area:heading;display:grid;grid-template-columns:24px minmax(0,1fr) auto;grid-template-rows:20px 23px;gap:0 4px;max-width:none;
 width:100%;min-width:0;min-height:44px;padding:1px 2px;align-content:center;overflow:hidden;text-align:left;color:#f4e4b8;
}
#app .single-table.gui-modern.gui-modern .opponent-heading>*{position:static;grid-area:auto;transform:none;margin:0}
#app .single-table.gui-modern.gui-modern .opponent-heading .player-crest{grid-column:1;grid-row:1/3;width:24px;height:24px}
#app .single-table.gui-modern.gui-modern .opponent-heading .opponent-name{grid-column:2;grid-row:1;font-size:13px;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .single-table.gui-modern.gui-modern .opponent-name small{font-size:9px}
#app .single-table.gui-modern.gui-modern .opponent-heading .seat-role{grid-column:3;grid-row:1;font-size:9px;max-width:70px;white-space:normal}
#app .single-table.gui-modern.gui-modern .opponent-heading strong{grid-column:2;grid-row:2;font-size:20px;white-space:nowrap}
#app .single-table.gui-modern.gui-modern .opponent-heading strong small{font-size:10px}
#app .single-table.gui-modern.gui-modern .opponent-heading .hand-count{grid-column:3;grid-row:2;display:block;font-size:10px;margin:0;white-space:nowrap}
#app .single-table.gui-modern.gui-modern .opponent-heading .back-fan{display:none}
#app .single-table.gui-modern.gui-modern .opponent .opponent-paper{
 grid-area:paper;display:flex;flex-direction:column;min-width:0;min-height:0;padding:1px 2px;gap:3px;background:none;color:inherit;
 overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;
}
#app .single-table.gui-modern.gui-modern .opponent .opponent-capture-content{grid-area:auto;display:grid;grid-template-rows:16px minmax(0,1fr);flex:1 0 168px;min-height:168px;padding:0;background:none;color:inherit;border:0;box-shadow:none}
#app .single-table.gui-modern.gui-modern .capture-title{font-size:10px;line-height:16px;color:#d3c395}
#app .single-table.gui-modern.gui-modern .opponent .capture-toggle{grid-area:auto;flex:none;width:100%;height:auto;min-height:32px;max-width:none;align-self:auto;white-space:normal;background:#254c3b;color:#f4e5b7;border:1px solid #b39b5a66;border-radius:5px;padding:3px;font-size:11px}
#app .single-table.gui-modern.gui-modern .public-hand-empty{display:none}
#app .single-table.gui-modern.gui-modern .public-hand:not(.public-hand-empty){display:grid;grid-area:auto;flex:none;height:58px;min-height:58px;padding:2px;grid-template-rows:14px 38px;background:#1e4636;border:1px solid #a18e5455;border-radius:4px}
#app .single-table.gui-modern.gui-modern .public-hand>span{font-size:10px;line-height:14px;color:#e2cd92}
#app .single-table.gui-modern.gui-modern .public-hand-cards{display:flex;overflow:auto;min-height:0;height:auto;padding:1px;gap:4px;container-type:normal}
#app .single-table.gui-modern.gui-modern .public-hand-cards .card{width:23px;min-width:23px;height:36px;flex:0 0 23px;margin:0}
#app .single-table.gui-modern.gui-modern .table-captures{
 display:grid;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:minmax(0,1fr);min-height:0;height:100%;width:100%;
 margin:0;padding:0;background:none;border:0;box-shadow:none;container-type:normal;
}
#app .single-table.gui-modern.gui-modern .table-capture-row{
 display:grid;grid-template-columns:34px minmax(0,1fr) 17px;gap:2px;min-height:0;height:auto;border-bottom:1px solid #b89f5840;align-items:stretch;
}
#app .single-table.gui-modern.gui-modern .rank-label,#app .single-table.gui-modern.gui-modern .row-count{font-size:10px;color:#e6d9b6;align-self:center;padding:0;line-height:1.3}
#app .single-table.gui-modern.gui-modern .rank-label{white-space:nowrap}
#app .single-table.gui-modern.gui-modern .table-capture-row .capture-scroll{
 display:flex;align-items:center;min-height:0;height:100%;min-width:0;container-type:size;padding:2px 1px 5px;gap:4px;
 overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#c9ae68 #173b2c;touch-action:pan-x pan-y pinch-zoom;
}
#app .single-table.gui-modern.gui-modern .table-capture-row .overlap-scroll .card{
 --modern-face:min(112px,100cqh);width:calc(var(--modern-face)*72/112);min-width:calc(var(--modern-face)*72/112);max-width:none;
 height:var(--modern-face);flex:0 0 calc(var(--modern-face)*72/112);margin:0;align-self:center;
}
#app .single-table.gui-modern.gui-modern .table-capture-row:after{color:#f0d999;background:#173b2cdd;bottom:3px}
#app .single-table.gui-modern.gui-modern .field-row{
 display:grid;grid-area:3/1/4/-1;grid-template-columns:minmax(0,1fr) 60px;grid-template-rows:minmax(0,1fr) 16px;gap:2px 6px;min-height:0;min-width:0;padding:0;
}
#app .single-table.gui-modern.gui-modern .table-zone{grid-column:1;grid-row:1;display:grid;grid-template-rows:18px minmax(0,1fr);min-height:0;padding:3px;background:#153f2822;border-color:#b49b4940;container-type:size}
#app .single-table.gui-modern.gui-modern .table-meta{font-size:10px;line-height:16px;min-width:0}
#app .single-table.gui-modern.gui-modern .table-cards{
 --field-size:min(160px,calc((100cqh - 26px - (var(--modern-rows,2) - 1)*5px)/var(--modern-rows,2)),calc((100cqw - 8px - (var(--modern-cols,3) - 1)*5px)/var(--modern-cols,3)*112/72));
 grid-template-columns:repeat(var(--modern-cols,3),minmax(0,1fr));grid-template-rows:repeat(var(--modern-rows,2),var(--field-size));grid-auto-rows:auto;
 align-items:center;align-content:center;justify-content:center;min-height:0;min-width:0;gap:5px;padding:2px;overflow:hidden;container-type:normal;
}
#app .single-table.gui-modern.gui-modern .table-cards .card{height:var(--field-size);width:calc(var(--field-size)*72/112);max-height:none;max-width:none;justify-self:center;align-self:center}
#app .single-table.gui-modern.gui-modern .action-rail{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:0}
#app .single-table.gui-modern.gui-modern .draw-rest{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:0}
#app .single-table.gui-modern.gui-modern .draw-rest>span{display:block;font-size:10px}
#app .single-table.gui-modern.gui-modern .draw-rest>strong{font-size:18px}
#app .single-table.gui-modern.gui-modern .draw-rest .deck-back{width:36px!important;margin:0}
#app .single-table.gui-modern.gui-modern .draw-tray{position:static;inset:auto;width:auto;height:auto;display:flex;flex-direction:column;gap:2px;padding:3px;margin:0;min-height:0;max-width:100%;color:#f1e1b4;background:#173f32;border:1px solid #c7ad68;border-radius:5px;box-shadow:none}
#app .single-table.gui-modern.gui-modern .draw-slot{width:40px;flex:none}
#app .single-table.gui-modern.gui-modern .draw-copy{width:auto;max-width:54px}
#app .single-table.gui-modern.gui-modern .draw-copy strong{display:block;font-size:9px;line-height:1.3;max-height:30px;overflow:hidden}
#app .single-table.gui-modern.gui-modern .draw-copy .eyebrow{font-size:9px}
#app .single-table.gui-modern.gui-modern .last-move{grid-column:1/-1;grid-row:2;min-height:0;padding:0 2px;font-size:9px;line-height:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app .single-table.gui-modern.gui-modern .personal-zone{
 display:grid;grid-area:4/1/5/-1;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
 min-height:0;min-width:0;padding:4px;gap:3px;color:#f3e5be;border:1px solid #b59b56;border-radius:12px;background:linear-gradient(115deg,#173e2fef,#123629ee);overflow:hidden;
}
#app .single-table.gui-modern.gui-modern .own-heading{display:flex;grid-area:1/1/2/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px 7px;min-width:0;padding:0}
#app .single-table.gui-modern.gui-modern .own-heading>.player-crest{display:none}
#app .single-table.gui-modern.gui-modern .own-heading>.seat-role{position:static;order:0;font-size:9px;padding:1px 3px;flex:none}
#app .single-table.gui-modern.gui-modern .own-heading button.own-name{width:auto;max-width:100px;min-width:0;min-height:32px;font-size:14px;text-align:left;margin:0;padding:2px}
#app .single-table.gui-modern.gui-modern .own-heading>.own-score{display:flex;flex-wrap:wrap;gap:2px;font-size:20px;line-height:1.2;max-width:100%}
#app .single-table.gui-modern.gui-modern .own-score small{font-size:10px}
#app .single-table.gui-modern.gui-modern .own-heading button.own-capture-label{display:block;min-height:32px;font-size:10px;max-width:none;width:auto;flex:none;color:#ecd69b;padding:2px}
#app .single-table.gui-modern.gui-modern .own-capture-label small{display:none}
#app .single-table.gui-modern.gui-modern .own-heading .personal-tools{display:flex;width:auto;gap:4px;margin:0;flex:none}
#app .single-table.gui-modern.gui-modern .own-heading .personal-tools button{min-height:32px;font-size:10px;padding:3px 5px;background:#1c4936;color:#eedcac;border:1px solid #a5904c66;border-radius:5px}
#app .single-table.gui-modern.gui-modern .own-capture-area{grid-area:2/1/3/-1;display:block;min-height:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
#app .single-table.gui-modern.gui-modern .yaku-paper{grid-area:3/1/4/-1;display:flex;flex-wrap:wrap;gap:3px;min-height:0;min-width:0;padding:1px;background:none;color:#f1dfb0;overflow:visible}
#app .single-table.gui-modern.gui-modern .yaku-heading{min-height:30px;font-size:10px;color:#f1dfb0}
#app .single-table.gui-modern.gui-modern .capture-yaku{flex:1;min-width:20px;height:30px;color:#e9d5a4;border-top:0}
#app .single-table.gui-modern.gui-modern .yaku-chip{color:#eddbb3;background:#204b37;border:1px solid #96855766;min-height:28px;font-size:11px}
#app .single-table.gui-modern.gui-modern .review-rail{display:flex;flex-direction:row;gap:3px;min-width:0;flex:none}
#app .single-table.gui-modern.gui-modern .review-rail button{font-size:10px;min-height:30px;padding:3px 4px;border-radius:5px}
#app .single-table.gui-modern.gui-modern .hand-zone{
 display:grid;grid-area:5/1/6/-1;grid-template-columns:minmax(0,1fr);grid-template-rows:16px minmax(0,1fr) 34px;
 min-height:0;min-width:0;margin:0;padding:2px 2px 4px;gap:3px;isolation:auto;border:0;border-top:1px solid #c3aa6366;border-radius:0;background:none;box-shadow:none;
}
#app .single-table.gui-modern.gui-modern .hand-zone:after{display:none}
#app .single-table.gui-modern.gui-modern .hand-title{color:#ead9ab;font-size:12px;line-height:16px;min-height:0;margin:0}
#app .single-table.gui-modern.gui-modern .hand-cards{display:grid;grid-template-columns:repeat(var(--hand-count),minmax(0,1fr));container-type:size;gap:4px;padding:3px 2px;min-height:0;min-width:0;overflow:visible;align-items:center}
#app .single-table.gui-modern.gui-modern .hand-cards>div{min-width:0;min-height:0;display:grid;place-items:center}
#app .single-table.gui-modern.gui-modern .hand-cards .card{width:min(100%,calc((100cqh - 8px)*72/112));min-width:0;height:auto;aspect-ratio:72/112;max-height:100%;max-width:104px;margin:0;touch-action:none}
#app .single-table.gui-modern.gui-modern .hand-card-label{font-size:9px;min-height:0;height:10px;padding:0;color:#e9d5a0;line-height:10px}
#app .single-table.gui-modern.gui-modern .public-marker{font-size:9px}
#app .single-table.gui-modern.gui-modern .hand-controls{display:grid;grid-template-columns:minmax(0,1fr) 82px;grid-template-areas:'prompt actions';gap:7px;min-height:0}
#app .single-table.gui-modern.gui-modern .hand-prompt{min-height:0;padding:3px 8px;font-size:11px;line-height:1.25;background:#102e25c9;color:#f6e7c3;border-color:#a58d4c77}
#app .single-table.gui-modern.gui-modern .rail-actions button.primary{min-height:32px;height:100%;font-size:15px;padding:3px 10px}
#app .single-table.gui-modern.gui-modern.left-handed .hand-controls{grid-template-columns:82px minmax(0,1fr);grid-template-areas:'actions prompt'}
#app .single-table.gui-modern.gui-modern.spectator-table{--modern-own:70px;--modern-hand:0px}
#app .single-table.gui-modern.gui-modern.spectator-table .hand-zone{display:none}
#app .single-table.gui-modern.gui-modern .spectator-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:2px}
#app .single-table.gui-modern.gui-modern .spectator-info h3{font-size:14px;margin:0}
#app .single-table.gui-modern.gui-modern .spectator-info button{min-height:32px;font-size:11px;padding:3px 6px}

@container app-viewport (orientation:landscape) and (min-width:600px){
 #app .single-table.gui-modern.gui-modern{
  --modern-hand:clamp(140px,calc(32 * var(--ui-vh,1dvh)),210px);
  max-width:2000px;height:calc(100 * var(--ui-vh,1dvh));min-height:360px;max-height:none;
  grid-template-columns:minmax(140px,21fr) minmax(130px,19fr) minmax(0,41fr) minmax(130px,19fr);
  grid-template-rows:32px minmax(0,1fr) var(--modern-hand);gap:6px;padding-block:3px max(4px,env(safe-area-inset-bottom));
 }
 #app .single-table.gui-modern.gui-modern .opponents{display:contents}
 #app .single-table.gui-modern.gui-modern .opponent[data-player-seat]{grid-column:2;grid-row:2/4;grid-template-rows:48px minmax(0,1fr)}
 #app .single-table.gui-modern.gui-modern .opponent[data-player-seat]:nth-child(2){grid-column:4;grid-row:2/4}
 #app .single-table.gui-modern.gui-modern .field-row{grid-column:3;grid-row:2;grid-template-columns:minmax(0,1fr) 50px;grid-template-rows:minmax(0,1fr) 16px;padding:0;gap:3px}
 #app .single-table.gui-modern.gui-modern .personal-zone{grid-column:1;grid-row:2/4}
 #app .single-table.gui-modern.gui-modern .hand-zone{grid-column:3;grid-row:3;grid-template-rows:14px minmax(0,1fr) 34px;padding:0 2px 3px}
 #app .single-table.gui-modern.gui-modern .hand-cards{grid-template-columns:repeat(var(--hand-count),minmax(0,1fr));justify-content:center;padding-inline:5px}
 #app .single-table.gui-modern.gui-modern .own-heading .personal-tools{flex-basis:100%}
 #app .single-table.gui-modern.gui-modern .own-heading .personal-tools button{flex:1}
 #app .single-table.gui-modern.gui-modern .own-heading button.own-name{max-width:100%;font-size:15px}
 #app .single-table.gui-modern.gui-modern .own-heading>.own-score{font-size:23px}
 #app .single-table.gui-modern.gui-modern .review-rail{width:100%}
 #app .single-table.gui-modern.gui-modern .review-rail button{flex:1}
 #app .single-table.gui-modern.gui-modern.left-handed{grid-template-columns:minmax(130px,19fr) minmax(0,41fr) minmax(130px,19fr) minmax(140px,21fr)}
 #app .single-table.gui-modern.gui-modern.left-handed .personal-zone{grid-column:4}
 #app .single-table.gui-modern.gui-modern.left-handed .opponent[data-player-seat]{grid-column:1}
 #app .single-table.gui-modern.gui-modern.left-handed .opponent[data-player-seat]:nth-child(2){grid-column:3}
 #app .single-table.gui-modern.gui-modern.left-handed .field-row{grid-column:2;grid-template-columns:50px minmax(0,1fr)}
 #app .single-table.gui-modern.gui-modern.left-handed .table-zone{grid-column:2}
 #app .single-table.gui-modern.gui-modern.left-handed .action-rail{grid-column:1}
 #app .single-table.gui-modern.gui-modern.left-handed .hand-zone{grid-column:2}
 #app .single-table.gui-modern.gui-modern.koikoi:not(.spectator-table){grid-template-columns:minmax(150px,23fr) minmax(0,54fr) minmax(150px,23fr)}
 #app .single-table.gui-modern.gui-modern.koikoi:not(.spectator-table) .opponent[data-player-seat]{grid-column:3}
 #app .single-table.gui-modern.gui-modern.koikoi:not(.spectator-table) .field-row{grid-column:2}
 #app .single-table.gui-modern.gui-modern.koikoi:not(.spectator-table) .hand-zone{grid-column:2}
 #app .single-table.gui-modern.gui-modern.koikoi.left-handed:not(.spectator-table) .personal-zone{grid-column:3}
 #app .single-table.gui-modern.gui-modern.koikoi.left-handed:not(.spectator-table) .opponent[data-player-seat]{grid-column:1}
 #app .single-table.gui-modern.gui-modern.koikoi.left-handed:not(.spectator-table) .hand-zone{grid-column:2}
 #app .single-table.gui-modern.gui-modern.spectator-table{grid-template-columns:repeat(var(--players),minmax(0,1fr));grid-template-rows:32px minmax(150px,1fr) minmax(100px,.8fr) 42px;min-height:420px}
 #app .single-table.gui-modern.gui-modern.spectator-table .opponent[data-player-seat]{grid-column:auto;grid-row:2}
 #app .single-table.gui-modern.gui-modern.spectator-table .field-row{grid-column:1/-1;grid-row:3;grid-template-columns:minmax(0,1fr) 65px}
 #app .single-table.gui-modern.gui-modern.spectator-table .personal-zone{grid-column:1/-1;grid-row:4;display:block}
 #app .single-table.gui-modern.gui-modern.spectator-table .table-zone{grid-column:1}
 #app .single-table.gui-modern.gui-modern.spectator-table .action-rail{grid-column:2}
}
@container app-viewport (orientation:landscape) and (min-height:600px){
 #app .single-table.gui-modern.gui-modern:not(.spectator-table){grid-template-rows:44px minmax(0,1fr) var(--modern-hand);gap:9px;padding:8px}
 #app .single-table.gui-modern.gui-modern .rank-label,#app .single-table.gui-modern.gui-modern .row-count{font-size:13px}
 #app .single-table.gui-modern.gui-modern .table-capture-row{grid-template-columns:45px minmax(0,1fr) 23px}
 #app .single-table.gui-modern.gui-modern .opponent .opponent-heading{grid-template-rows:25px 30px;grid-template-columns:30px minmax(0,1fr) auto;min-height:56px}
 #app .single-table.gui-modern.gui-modern .opponent[data-player-seat]{grid-template-rows:60px minmax(0,1fr)}
 #app .single-table.gui-modern.gui-modern .opponent-heading .opponent-name{font-size:18px}
 #app .single-table.gui-modern.gui-modern .opponent-heading strong{font-size:28px}
 #app .single-table.gui-modern.gui-modern .opponent-heading .hand-count{font-size:12px}
 #app .single-table.gui-modern.gui-modern .hand-zone{grid-template-rows:18px minmax(0,1fr) 42px}
 #app .single-table.gui-modern.gui-modern .hand-controls{grid-template-columns:minmax(0,1fr) 120px}
 #app .single-table.gui-modern.gui-modern.left-handed .hand-controls{grid-template-columns:120px minmax(0,1fr)}
 #app .single-table.gui-modern.gui-modern .hand-prompt{font-size:14px}
 #app .single-table.gui-modern.gui-modern .rail-actions button.primary{font-size:18px}
}

#app .single-table.gui-modern.gui-modern .rank-name{display:inline}
#app .single-table.gui-modern.gui-modern .action-rail:has(.draw-tray) .draw-rest{display:none}
#app .single-table.gui-modern.gui-modern .draw-slot .card{width:100%;height:auto;max-width:none;aspect-ratio:72/112}