/* Thanasis (static/js/games/thanasis.js): a bright Mediterranean table — terrazzo, whitewash with blue tiles, sand
   linen, light olive wood, coral — the only light table of the site; the deck and a "river" of discards in the middle;
   the others round it with a bar that fills (and burns) as they come near the limit; your cards along the bottom in
   their combinations. Five tables (.tnt-*) and five card backs (drawn in the js). Its own look. */

/* ---------- the tables (light: the ink is dark) ---------- */
.tnt-terrazzo, .tnt-basalt { --t1: #f1eee8; --t2: #e3ded4; --rim: #ffffff; --edge: #c9c1b2; --acc: #1f8f6a; --ink: #23262d;
  --tex: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22260%22 height=%22260%22%3E%3Cpolygon points=%2271.4,57.4 71.9,57.4 72.3,58.1 71.3,58.8 70.8,58.0%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%2257.9,199.0 55.1,199.9 54.6,198.2 55.8,196.9 57.5,197.8%22 transform=%22translate%280 0%29%22 fill=%22%238b95a6%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22221.7,227.4 220.6,227.1 219.2,224.6 221.4,223.6 224.0,222.8 225.7,223.7 224.4,225.3 224.1,227.0%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22105.1,239.2 102.2,239.7 100.6,239.4 100.1,237.5 101.4,236.8 103.3,235.9 104.4,236.7 105.3,238.6%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%2285.2,76.2 87.0,75.0 89.5,74.6 90.4,75.9 90.6,78.2 88.7,77.9%22 transform=%22translate%280 0%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%2281.6,15.9 79.2,16.6 77.7,15.2 79.0,13.4 81.8,14.2%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22136.6,31.6 135.6,32.9 133.8,32.3 133.1,30.9 134.4,29.3 135.9,30.7%22 transform=%22translate%280 0%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%22112.6,109.0 113.4,109.6 112.9,110.5 112.4,110.9 111.4,110.6 111.2,110.0 111.5,109.7 112.2,109.3%22 transform=%22translate%280 0%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%2214.7,99.9 12.9,99.3 13.9,98.3 14.6,97.0 15.6,97.5 17.0,97.4 16.4,98.9 16.5,99.8%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22148.5,11.3 148.4,9.3 151.4,8.5 153.1,10.3 151.2,13.2%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22148.5,11.3 148.4,9.3 151.4,8.5 153.1,10.3 151.2,13.2%22 transform=%22translate%280 260%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2235.5,89.6 36.2,92.1 34.1,92.0 32.2,91.3 33.5,89.9%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%2248.1,89.8 51.4,85.2 55.3,85.4 58.7,86.4 58.0,91.0 55.0,91.9 51.7,92.8%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22207.8,225.5 204.9,225.2 203.4,224.7 205.7,220.6 206.5,221.1 210.4,223.2 208.9,225.1%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22121.3,52.6 121.4,51.9 121.1,51.6 122.2,50.7 122.7,51.3 123.5,51.5 123.5,52.2 122.3,52.9%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2263.9,183.5 66.2,182.9 69.0,183.8 67.3,185.5 65.2,186.1%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22108.2,244.0 109.4,243.4 110.5,244.3 110.4,245.1 108.9,245.1 108.0,244.8%22 transform=%22translate%280 0%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%2282.2,209.7 81.6,210.7 79.9,211.0 79.0,209.7 80.4,208.4 81.4,208.8%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%22239.8,29.2 241.3,31.8 239.7,33.3 237.6,33.9 236.8,31.9 237.0,29.8%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22184.9,62.0 183.3,61.1 183.9,60.1 185.1,59.3 187.3,59.7 187.1,61.4 186.7,62.8%22 transform=%22translate%280 0%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22139.5,157.3 140.6,154.3 144.1,154.3 145.3,156.7 142.8,158.2 140.7,158.0%22 transform=%22translate%280 0%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%22198.2,99.5 196.5,99.1 196.1,98.2 197.3,97.7 197.6,97.5 198.9,97.8 199.2,98.8 198.6,99.5%22 transform=%22translate%280 0%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%2278.4,177.4 78.1,175.5 79.3,173.0 83.5,172.4 84.1,173.9 86.5,176.2 85.7,179.2 79.3,180.0%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22157.6,239.1 157.3,238.2 159.4,236.8 161.4,237.7 162.3,238.5 162.0,239.8 160.0,241.2 159.5,240.6%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%22170.5,128.4 167.2,129.6 165.1,127.8 167.5,126.1 169.1,126.5%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%2250.2,190.1 50.6,190.7 51.4,191.8 52.1,194.1 49.1,193.6 47.0,193.1 47.7,191.2%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2231.3,17.7 30.3,19.3 29.0,19.8 27.4,17.2 27.2,15.9 29.7,14.9 31.3,14.2 31.6,16.0%22 transform=%22translate%280 0%29%22 fill=%22%238b95a6%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2240.5,108.4 38.6,107.5 38.6,105.3 40.2,104.5 41.7,103.8 41.8,105.3 42.7,107.0 42.4,107.8%22 transform=%22translate%280 0%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%2220.9,9.3 22.8,8.8 23.1,9.4 22.7,11.6 21.1,11.9 19.3,11.3 19.0,10.0 19.7,9.8%22 transform=%22translate%280 0%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%2220.9,9.3 22.8,8.8 23.1,9.4 22.7,11.6 21.1,11.9 19.3,11.3 19.0,10.0 19.7,9.8%22 transform=%22translate%280 260%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%22244.5,212.1 244.7,210.3 246.9,210.5 247.2,211.7 245.5,213.0%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%22233.3,125.7 231.4,129.6 223.0,128.5 222.7,125.0 230.5,122.1%22 transform=%22translate%280 0%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22121.0,36.5 121.0,38.4 118.1,39.4 117.4,38.5 117.5,36.5 118.9,36.1%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%22222.7,254.4 226.4,251.9 228.6,253.1 228.2,256.5 226.3,258.0 223.5,255.8%22 transform=%22translate%280 -260%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%22222.7,254.4 226.4,251.9 228.6,253.1 228.2,256.5 226.3,258.0 223.5,255.8%22 transform=%22translate%280 0%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%22222.3,251.7 224.1,247.0 230.1,250.3 231.1,255.2 227.1,255.1%22 transform=%22translate%280 -260%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%22222.3,251.7 224.1,247.0 230.1,250.3 231.1,255.2 227.1,255.1%22 transform=%22translate%280 0%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%22109.6,26.1 111.9,24.0 113.7,23.5 114.6,26.2 112.2,27.7%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%2269.9,63.8 73.3,68.8 64.8,73.3 61.0,66.6 65.7,63.0%22 transform=%22translate%280 0%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%2276.1,257.4 74.9,256.5 74.4,253.2 75.3,252.2 77.6,251.2 80.0,252.6 79.8,255.4 78.8,256.6%22 transform=%22translate%280 -260%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2276.1,257.4 74.9,256.5 74.4,253.2 75.3,252.2 77.6,251.2 80.0,252.6 79.8,255.4 78.8,256.6%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22106.2,51.5 107.6,50.7 108.9,51.3 109.3,52.3 109.3,53.7 107.4,53.8 107.1,52.7%22 transform=%22translate%280 0%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%2269.7,99.8 68.0,101.6 66.4,101.6 65.8,98.9 67.9,97.2 68.7,96.7 70.9,98.4%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%2242.1,105.7 42.1,108.4 40.8,110.1 37.3,109.3 38.3,106.8%22 transform=%22translate%280 0%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%2256.7,166.6 55.4,167.5 53.7,166.5 54.5,165.1 55.9,164.8%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%22170.7,7.4 170.9,6.5 171.7,5.9 173.2,6.3 172.9,7.7%22 transform=%22translate%280 0%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22170.7,7.4 170.9,6.5 171.7,5.9 173.2,6.3 172.9,7.7%22 transform=%22translate%280 260%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22167.9,7.2 169.3,7.7 168.4,8.5 167.5,9.6 166.4,9.0 165.3,8.4 165.7,6.9 167.4,6.6%22 transform=%22translate%280 0%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%22167.9,7.2 169.3,7.7 168.4,8.5 167.5,9.6 166.4,9.0 165.3,8.4 165.7,6.9 167.4,6.6%22 transform=%22translate%280 260%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%22107.6,27.0 106.9,25.1 106.0,24.1 107.3,23.7 109.1,23.1 110.7,24.4 109.2,25.4 108.9,25.8%22 transform=%22translate%280 0%29%22 fill=%22%238b95a6%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2229.1,220.3 28.0,221.3 26.8,220.5 26.6,219.4 27.2,218.3 28.6,219.0 29.2,219.7%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2292.1,121.8 93.7,118.1 96.4,112.8 102.4,114.7 104.9,118.3 99.5,122.3%22 transform=%22translate%280 0%29%22 fill=%22%234d525b%22 fill-opacity=%220.45%22/%3E%3Cpolygon points=%2258.6,255.9 57.9,256.9 56.2,256.4 56.2,254.8 58.0,255.0%22 transform=%22translate%280 -260%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2258.6,255.9 57.9,256.9 56.2,256.4 56.2,254.8 58.0,255.0%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2218.7,80.6 19.2,80.1 21.5,79.4 22.2,80.3 22.0,82.2 21.0,82.6 19.8,82.8 17.9,82.0%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%2239.1,29.1 37.5,29.0 35.6,26.6 37.3,24.8 39.0,24.2 39.5,25.8 40.3,27.0%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%2215.2,100.2 10.8,100.7 3.9,99.7 3.5,94.6 7.1,93.4 9.6,89.9 15.4,94.7%22 transform=%22translate%280 0%29%22 fill=%22%238b95a6%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2215.2,100.2 10.8,100.7 3.9,99.7 3.5,94.6 7.1,93.4 9.6,89.9 15.4,94.7%22 transform=%22translate%28260 0%29%22 fill=%22%238b95a6%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22134.6,160.4 132.6,158.0 134.6,157.3 136.9,155.4 140.1,158.3 138.1,159.6 135.6,161.3%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%22146.0,166.1 146.5,167.1 146.2,167.8 145.6,168.2 144.6,167.8 143.8,167.4 144.9,166.0%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22161.7,158.3 160.0,157.4 158.4,155.1 158.6,153.2 161.9,153.3 164.2,155.1%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%2275.6,99.3 75.3,100.1 73.5,100.6 72.0,100.3 70.9,100.0 71.0,98.3 72.8,98.1 73.8,97.8%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22242.0,217.3 242.8,218.0 242.6,218.4 242.5,219.3 241.2,218.7 241.1,218.3 241.2,217.4%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22138.9,163.3 140.6,163.4 141.1,164.9 139.8,166.4 138.1,165.9 137.6,163.9%22 transform=%22translate%280 0%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%22191.7,164.3 189.8,165.1 189.4,163.8 188.6,162.5 189.6,161.6 191.3,162.3 192.2,163.5%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22202.4,226.4 201.1,226.1 201.1,224.9 202.9,224.1 203.9,223.7 204.4,224.8 204.2,225.9%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%2289.3,9.5 90.7,8.9 93.7,9.8 94.4,10.9 92.2,12.3 90.2,12.8 89.8,11.8%22 transform=%22translate%280 0%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%2289.3,9.5 90.7,8.9 93.7,9.8 94.4,10.9 92.2,12.3 90.2,12.8 89.8,11.8%22 transform=%22translate%280 260%29%22 fill=%22%23d3b47c%22 fill-opacity=%220.6%22/%3E%3Cpolygon points=%22148.4,140.0 147.1,139.1 146.2,137.3 147.7,135.5 150.6,136.6 150.8,136.5 151.5,139.8 149.3,140.3%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%22221.9,183.5 224.3,183.9 223.1,186.9 220.4,187.2 217.8,186.4 219.0,182.7%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2222.1,125.3 18.0,124.3 13.0,122.7 15.3,120.2 15.9,115.9 20.8,118.5 23.6,122.0%22 transform=%22translate%280 0%29%22 fill=%22%23ffffff%22 fill-opacity=%220.9%22/%3E%3Cpolygon points=%2244.9,246.7 42.8,245.7 41.2,245.5 42.8,243.7 44.7,243.8 46.1,244.9%22 transform=%22translate%280 0%29%22 fill=%22%238b95a6%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%2278.7,20.5 76.1,21.2 75.7,17.8 77.9,17.2 78.9,18.3%22 transform=%22translate%280 0%29%22 fill=%22%238b95a6%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22106.3,160.3 102.2,162.5 96.9,164.0 96.3,160.7 96.8,157.4 99.7,156.1%22 transform=%22translate%280 0%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22140.9,221.2 139.9,221.4 138.4,221.3 137.5,220.2 138.3,219.0 139.1,218.5 140.9,219.4 141.4,220.4%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22121.0,122.3 118.6,118.3 121.4,114.1 125.4,113.8 130.4,119.4 125.3,124.1%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22170.3,251.7 172.0,251.9 171.4,253.2 170.9,253.5 169.4,253.9 168.7,251.7%22 transform=%22translate%280 -260%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22170.3,251.7 172.0,251.9 171.4,253.2 170.9,253.5 169.4,253.9 168.7,251.7%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%22133.0,145.8 133.4,144.3 135.7,143.5 136.5,145.1 136.8,146.2 136.3,147.0 134.2,147.5 132.0,146.6%22 transform=%22translate%280 0%29%22 fill=%22%23b8694a%22 fill-opacity=%220.55%22/%3E%3Cpolygon points=%22234.7,102.5 234.3,103.7 233.4,104.1 230.8,104.2 230.6,102.8 231.4,101.0 233.6,101.5%22 transform=%22translate%280 0%29%22 fill=%22%23a9b9a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%2232.8,251.5 32.6,250.1 35.9,248.5 37.9,249.6 38.0,252.4 35.4,252.6%22 transform=%22translate%280 -260%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3Cpolygon points=%2232.8,251.5 32.6,250.1 35.9,248.5 37.9,249.6 38.0,252.4 35.4,252.6%22 transform=%22translate%280 0%29%22 fill=%22%23c9a6a0%22 fill-opacity=%220.5%22/%3E%3C/svg%3E") 0 0 / 260px 260px; }
.tnt-aegean { --t1: #fbfbf8; --t2: #eef0ee; --rim: #1d5fb0; --edge: #154a8a; --acc: #1d5fb0; --ink: #1a2a40;
  --tex: repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 1px, transparent 1px 9px); }
.tnt-linen { --t1: #efe4cf; --t2: #e2d4b9; --rim: #f8f1e2; --edge: #c8b590; --acc: #b5643a; --ink: #3a2c1c;
  --tex: repeating-linear-gradient(0deg, rgba(90,70,40,.06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90,70,40,.05) 0 1px, transparent 1px 3px); }
.tnt-olive { --t1: #e8dcc2; --t2: #d7c49e; --rim: #b89a68; --edge: #8a6e44; --acc: #56703a; --ink: #33291a;
  --tex: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22300%22%3E%3Cfilter id=%22w%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0025 0.22%22 numOctaves=%223%22 seed=%227%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .40  0 0 0 0 .29  0 0 0 0 .15  0 0 0 2.2 -1.05%22/%3E%3C/filter%3E%3Crect width=%22600%22 height=%22300%22 filter=%22url%28%23w%29%22 opacity=%22.38%22/%3E%3C/svg%3E") 0 0 / 600px 300px; }
.tnt-coral { --t1: #fbe9e1; --t2: #f3d3c6; --rim: #ffffff; --edge: #e2a996; --acc: #d4553a; --ink: #3a2320;
  --tex: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 1px, transparent 1.5px) 0 0 / 14px 14px; }

/* ---------- three dark tables (the ink is light; the plates and the cards stay white) ---------- */
.tnt-basalt { --t1: #34373d; --t2: #1f2125; --rim: #4a4e56; --edge: #121316; --acc: #2fbf8f; --ink: #eef0f2; --hl: rgba(255,255,255,.07); --sheen: rgba(255,255,255,.06);
  --track: rgba(255,255,255,.16); --mut: #a7adb8; }
.tnt-night { --t1: #1c3358; --t2: #0d1a31; --rim: #e9eef6; --edge: #0a1424; --acc: #f2b84b; --ink: #eef3fb; --hl: rgba(140,180,255,.10); --sheen: rgba(255,255,255,.05);
  --track: rgba(255,255,255,.16); --mut: #a9b7cf;
  --tex: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 9px); }
.tnt-walnut { --t1: #4a3220; --t2: #2a1b10; --rim: #6b4a2c; --edge: #1a0f08; --acc: #e0a43a; --ink: #f5ead9; --hl: rgba(255,210,150,.08); --sheen: rgba(255,230,190,.06);
  --track: rgba(255,255,255,.16); --mut: #c8b49a;
  --tex: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%22300%22%3E%3Cfilter id=%22w%22 x=%220%22 y=%220%22 width=%22100%25%22 height=%22100%25%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.0025 0.2%22 numOctaves=%223%22 seed=%2211%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 .78  0 0 0 0 .6  0 0 0 0 .38  0 0 0 2.2 -1.05%22/%3E%3C/filter%3E%3Crect width=%22600%22 height=%22300%22 filter=%22url%28%23w%29%22 opacity=%22.22%22/%3E%3C/svg%3E") 0 0 / 600px 300px; }
/* graphite (as in the game's picture): deep graphite, a soft green light rising from below, a faint white hairline */
.tnt-graphite { --t1: #2b3038; --t2: #121418; --rim: #1a1d22; --edge: #0c0d10; --acc: #10b981; --ink: #eef0f2; --hl: rgba(255,255,255,.06); --sheen: rgba(255,255,255,.04);
  --track: rgba(255,255,255,.16); --mut: #a7adb8;
  --tex: radial-gradient(ellipse 70% 45% at 50% 105%, rgba(16,185,129,.28), transparent 70%);
  --pan: #1b1f25; --pan2: #252a32; --panb: #10b981; --pink: #eef0f2; --pmut: #a7adb8; --pred: #ff6b7d;
  --pwin: rgba(16,185,129,.14); --pout: rgba(225,29,72,.16); --ptrack: rgba(255,255,255,.16); }
.tnt-graphite .tn-table { box-shadow: inset 0 0 0 8px var(--rim), inset 0 0 0 9px rgba(255,255,255,.12), inset 0 3px 24px rgba(0,0,0,.45), 0 18px 34px -18px rgba(0,0,0,.7); }
.tnt-night .tn-table { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px #1d5fb0, inset 0 0 0 13px #fff, inset 0 3px 18px rgba(0,0,0,.4), 0 18px 34px -18px rgba(0,0,0,.6); }
/* (on a dark table the bars under the others read light) */
.tn-opp .tn-burn b { color: var(--ink); } .tn-opp .tn-burn b small { color: var(--mut, #8a8f99); }
.tn-opp .tn-burn i { background: var(--track, rgba(35,38,45,.12)); }

/* ---------- a card ---------- */
.tnc { position: relative; display: block; width: var(--cw, 70px); aspect-ratio: 2 / 3; flex: none; border-radius: calc(var(--cw, 70px) * .1); }
.tnc .tnsvg, .tn-hc .tnsvg { display: block; width: 100%; height: 100%; }
.tn-ghost { position: fixed; z-index: 95; pointer-events: none; will-change: transform; filter: drop-shadow(0 10px 12px rgba(30,30,40,.3)); }
.tn-ghost .tnc { width: 100%; }

/* ---------- the page ---------- */
html:has(body.game-thanasis[data-page="table"]) { overflow: hidden; }
body.game-thanasis[data-page="table"] .site-foot { display: none; }
body.game-thanasis[data-page="table"] .chat-fab { display: none !important; }
body.game-thanasis[data-page="table"] #table.page { max-width: none; height: calc(100dvh - var(--top)); box-sizing: border-box; overflow: hidden; padding: 10px 14px; }
body.game-fs .tn-wrap { height: 100%; }
.tn-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; height: 100%;
  --cw: clamp(54px, 5.4vw, 84px); }

/* ---------- the bar ---------- */
.tn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 5px 6px 5px 14px; border-radius: 16px;
  background: #fffdf8; border: 1px solid #e3ded4; box-shadow: 0 8px 18px -12px rgba(30,30,40,.35); color: #23262d; }
.tn-info { min-width: 0; font: 800 12.5px 'Inter', system-ui, sans-serif; color: #4a4f5a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.tn-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 38px; height: 38px; padding: 0; border-radius: 14px; cursor: pointer;
  color: #23262d; font: 800 12.5px 'Inter', system-ui, sans-serif; background: #fffdf8; border: 1px solid #e3ded4; box-shadow: 0 3px 8px -4px rgba(30,30,40,.3); }
.tn-tool:hover { border-color: #1f8f6a; color: #1f8f6a; }
.tn-tool svg.i { width: 17px; height: 17px; }
.tn-tool.wide { width: auto; padding: 0 13px; white-space: nowrap; }
.tn-tool.hidden { display: none; }
.tn-tool > b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; display: grid; place-items: center;
  font-size: 10.5px; color: #fff; background: #e0243a; }
.tn-tool > b.hidden { display: none; }
.tn-tool.tn-leave:hover { border-color: #e0243a; color: #e0243a; }
.tn-mute .tv-snd-off { display: none; }
body.tv-muted .tn-mute .tv-snd-off { display: inline; } body.tv-muted .tn-mute .tv-snd-on { display: none; }

/* ---------- the table: light stone or cloth, a white rim, soft sunlight ---------- */
.tn-table { position: relative; min-height: 0; border-radius: 28px; isolation: isolate; color: var(--ink);
  background: var(--tex), radial-gradient(ellipse 80% 70% at 35% 25%, var(--hl, #fff) 0, transparent 60%), linear-gradient(160deg, var(--t1), var(--t2));
  box-shadow: inset 0 0 0 8px var(--rim), inset 0 0 0 9px var(--edge), inset 0 3px 18px rgba(30,30,40,.12), 0 18px 34px -18px rgba(30,30,40,.45); }
.tnt-aegean .tn-table { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px var(--rim), inset 0 0 0 13px #fff, inset 0 3px 18px rgba(30,30,40,.12), 0 18px 34px -18px rgba(30,30,40,.45); }
.tn-table::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(115deg, var(--sheen, rgba(255,255,255,.55)), transparent 35%), radial-gradient(ellipse 50% 30% at 80% 100%, rgba(0,0,0,.06), transparent 70%); }

/* ---------- the others ---------- */
.tn-opps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tn-opp { position: absolute; display: grid; justify-items: center; gap: 6px; }
.tn-opp.at-t { left: 50%; top: 18px; transform: translateX(-50%); }
.tn-opp.at-l { left: 22px; top: 46%; transform: translateY(-50%); } .tn-opp.at-r { right: 22px; top: 46%; transform: translateY(-50%); }
.tn-plate { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #fffdf8; box-shadow: 0 6px 14px -8px rgba(30,30,40,.45); border: 1px solid #e3ded4; }
.tn-opp.turn .tn-plate { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc), 0 8px 18px -8px var(--acc); }
.tn-opp.out { filter: grayscale(.9); opacity: .55; }
.tn-opp.mate .tn-plate { background: #eefaf2; }
.tn-av { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 3px; box-sizing: border-box; border-radius: 50%; flex: none; }
.tn-av.sm { width: 28px; height: 28px; padding: 2px; }
.tn-tring { position: absolute; inset: 0; border-radius: 50%; background: #e7e3da; }
.tn-opp.turn .tn-tring, .tn-dock.my-turn .tn-tring { background: conic-gradient(var(--acc) calc(var(--k, 1) * 360deg), #e7e3da 0); }
.tn-avi { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 900; font-size: 16px;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.45), transparent 45%), var(--bg); box-shadow: 0 0 0 2px #fff; }
.tn-avi svg.i { width: 20px; height: 20px; } .tn-avi .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tn-pn { display: grid; line-height: 1.15; color: #23262d; }
.tn-pn b { font-size: 12.5px; font-weight: 900; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn-pn small { font-size: 10.5px; font-weight: 700; color: #6b7280; }
.tn-opp.out .tn-pn small { color: #e0243a; }
.tn-backs { position: relative; display: block; width: 100px; height: 40px; }
.tn-backs i { position: absolute; left: calc(var(--k) * 7px); bottom: 0; width: 26px; aspect-ratio: 2 / 3; filter: drop-shadow(0 1px 2px rgba(30,30,40,.25)); }
.tn-backs i .tnsvg { display: block; width: 100%; height: 100%; }
.tn-backs em { position: absolute; right: -4px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; display: grid; place-items: center;
  font-style: normal; font-size: 11px; font-weight: 900; color: #fff; background: #23262d; }
/* the end of a hand: the hand face up where it lies — its combinations side by side, the cards left out underlined in red */
.tn-open { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 7px; max-width: 300px; pointer-events: none; }
.tn-og { display: flex; padding: 2px; border-radius: 6px; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(30,30,40,.18); }
.tn-og.dead { background: rgba(224,36,58,.1); box-shadow: inset 0 -2px 0 rgba(224,36,58,.75); }
.tn-og .tnc.mini { --cw: 34px; margin-left: -13px; animation: tnTurnUp .45s cubic-bezier(.3,1.2,.5,1) calc(var(--k) * 45ms) backwards; }
.tn-og .tnc.mini:first-child { margin-left: 0; }
@keyframes tnTurnUp { from { transform: perspective(200px) rotateY(90deg); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .tn-og .tnc.mini { animation: none; } }
/* how near the limit: a bar that fills green to amber to red, and burns near the end */
.tn-burn { position: relative; display: flex; align-items: center; gap: 6px; width: 120px; }
.tn-burn i { position: relative; flex: 1; height: 7px; border-radius: 4px; background: rgba(35,38,45,.12); overflow: hidden; }
.tn-burn i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--k)); border-radius: 4px;
  background: linear-gradient(90deg, #1f8f6a, #e0a43a 60%, #e0243a); background-size: calc(100% / max(.08, var(--k))) 100%; }
.tn-burn b { font: 900 12px 'Inter', system-ui, sans-serif; color: #23262d; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tn-burn b small { font-weight: 700; color: #8a8f99; }
.tn-burn.hot i { box-shadow: 0 0 10px rgba(224,36,58,.55); animation: tnHot 1s ease-in-out infinite; }
.tn-burn.hot b::before { content: '🔥'; margin-right: 2px; }
.tn-burn.out b { color: #e0243a; }
@keyframes tnHot { 50% { box-shadow: 0 0 16px rgba(224,36,58,.9); } }

/* ---------- the middle: the deck and the river of discards ---------- */
.tn-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; display: flex; align-items: center; gap: calc(var(--cw) * .6); }
/* the card turned up beside the deck: its rank is wild this hand (a gold ring, a label under it) */
.tn-wild { display: grid; justify-items: center; gap: 8px; }
.tn-wild:empty { display: none; }
.tn-wild .tnc { width: calc(var(--cw) * .82); height: calc(var(--cw) * 1.23); transform: rotate(-7deg); border-radius: calc(var(--cw) * .09);
  box-shadow: 0 0 0 3px #f2a40c, 0 0 18px rgba(242,164,12,.55), 0 8px 14px -6px rgba(30,30,40,.4); }
.tn-wild em { font-style: normal; font-size: 11px; font-weight: 900; padding: 2px 9px; border-radius: 999px; color: #fff; background: #23262d; white-space: nowrap; }
/* a joker of this hand (the jokers and the wild rank): a small gold star on the corner */
.tn-hc.wild::after, .tnc.wild::after { content: '★'; position: absolute; z-index: 3; bottom: 6%; left: 7%; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font: 900 11px/1 'Inter', system-ui, sans-serif; color: #fff; background: #f2a40c; box-shadow: 0 2px 5px rgba(30,30,40,.35); pointer-events: none; }
.tnc.mini.wild::after { width: 9px; height: 9px; bottom: 2px; left: 1px; font-size: 6px; }
.tn-wild .tnc.wild::after { display: none; }
.tn-deck { position: relative; width: var(--cw); aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: default; }
.tn-deck .tnc.d { position: absolute; inset: 0; width: 100%; transform: translate(calc(var(--i) * -1.5px), calc(var(--i) * -2px)); filter: drop-shadow(0 2px 3px rgba(30,30,40,.3)); }
.tn-deck em { position: absolute; z-index: 5; left: 50%; bottom: -12px; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px;
  color: #fff; background: #23262d; }
.tn-deck.can, .tn-pile.can { cursor: pointer; }
.tn-deck.can .tnc.d:last-of-type { animation: tnCan 1.3s ease-in-out infinite; }
@keyframes tnCan { 50% { transform: translate(-6px, -10px); filter: drop-shadow(0 8px 12px rgba(31,143,106,.55)); } }
/* the discards: one pile, card on card, each a little askew as thrown (only the top one shows whole) */
.tn-pile { position: relative; height: calc(var(--cw) * 1.5); width: calc(var(--cw) * 1.5); padding: 0; border: 0; background: none; }
.tn-pile .tnc.rv { position: absolute; top: 0; width: var(--cw); height: calc(var(--cw) * 1.5); left: calc(50% - var(--cw) / 2);
  translate: calc(var(--x) * 1px) calc(var(--y) * 1px); transform: rotate(calc(var(--r) * 1deg));
  filter: drop-shadow(0 2px 3px rgba(30,30,40,.25)); }
.tn-hc.incoming { visibility: hidden; }        /* (a card on its way to your hand: it shows when it lands) */
.tn-pile .tnc.rv.top { filter: drop-shadow(0 2px 3px rgba(30,30,40,.25)); }   /* (the same shadow as the others: covered, it does not change) */
.tn-pile.can .tnc.rv.top { box-shadow: 0 0 0 3px var(--acc), 0 0 18px var(--acc); animation: tnTop 1.3s ease-in-out infinite; }
/* (the top card may be taken: it breathes a little up and down, keeping the way it lies — it never turns straight) */
@keyframes tnTop { 50% { translate: calc(var(--x) * 1px) calc(var(--y) * 1px - 6px); } }
/* taking a card from the deck: at the press its top card slides out a little and settles back — it gives a card */
.tn-deck.give .tnc.d:last-of-type { animation: tnGive .42s cubic-bezier(.3,1.3,.5,1) !important; }
@keyframes tnGive { 35% { translate: 8px -12px; rotate: 5deg; filter: drop-shadow(0 8px 10px rgba(30,30,40,.4)); } }
@media (prefers-reduced-motion: reduce) { .tn-deck.give .tnc.d { animation: none !important; } }

/* ---------- the word in the middle ---------- */
.tn-banner { position: absolute; left: 50%; top: 26%; z-index: 25; transform: translateX(-50%); max-width: min(90%, 520px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; padding: 8px 18px; border-radius: 999px; font: 900 14px 'Inter', system-ui, sans-serif; color: #23262d; background: #fffdf8;
  box-shadow: 0 10px 22px -10px rgba(30,30,40,.5); border: 1px solid #e3ded4; animation: tnBan .3s cubic-bezier(.3,1.4,.5,1); }
.tn-banner.blank { display: none; }
.tn-banner.good { color: #fff; background: #1f8f6a; border-color: #1f8f6a; }
.tn-banner.gold { color: #23262d; background: #ffd27a; border-color: #e0a43a; }
@keyframes tnBan { from { opacity: 0; transform: translate(-50%, -6px) scale(.96); } }
.tn-table > .paused21 { z-index: 26; }

/* ---------- the time round the table ---------- */
/* (the turn's line round the table: on its own layer — it changes every frame, the table under it is not drawn again) */
.tn-timer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; will-change: transform; }
.tn-timer rect { fill: none; stroke-width: 4; }
.tn-timer .tr-bg { stroke: rgba(35,38,45,.06); }
.tn-timer .tr-fg { stroke: rgba(35,38,45,.35); stroke-linecap: round; stroke-dasharray: 100 100; }
.tn-timer.mine .tr-fg { stroke: var(--acc); }
.tn-timer.low .tr-fg { stroke: #e0243a; animation: tnLow .55s ease-in-out infinite alternate; }
.tn-timer.idle .tr-fg, .tn-timer.idle .tr-head { opacity: 0; }
.tn-timer .tr-head { fill: #fff; stroke: var(--acc); stroke-width: 2; }
@keyframes tnLow { to { stroke-width: 6; } }

/* ---------- you ---------- */
.tn-me { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.tn-dock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 8px 200px; border-radius: 18px; min-width: 0; text-align: center;
  background: #fffdf8; border: 1px solid #e3ded4; box-shadow: 0 8px 18px -12px rgba(30,30,40,.35); color: #23262d; }
.tn-dock.my-turn { border-color: #1f8f6a; box-shadow: 0 0 0 2px rgba(31,143,106,.3), 0 8px 18px -12px rgba(30,30,40,.35); }
.tn-who { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; }
.tn-meinfo { display: grid; gap: 3px; text-align: left; }
.tn-meinfo > small { font-size: 10.5px; font-weight: 800; color: #6b7280; }
.tn-dock .turnlbl { display: flex; justify-content: center; gap: 10px; margin: 0; max-width: 100%; }
.tn-dock .turnlbl b { font-size: 14px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-dock .turnlbl span { font-size: 12px; font-weight: 800; color: #6b7280; white-space: nowrap; }
.tn-dock .tbar { display: none; }
.tn-acts { display: flex; justify-content: center; gap: 8px; }
.tn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; min-width: 190px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  font: 900 14px 'Inter', system-ui, sans-serif; color: #23262d; border: 0; background: linear-gradient(180deg, #ffe08a, #f2a40c); box-shadow: 0 4px 0 #b9780a, 0 8px 18px -6px rgba(242,164,12,.7);
  animation: tnClose 1.1s ease-in-out infinite; }
.tn-btn.hidden { display: none; }
@keyframes tnClose { 50% { transform: scale(1.05); } }
.tn-hand { display: flex; justify-content: center; align-items: flex-end; gap: 14px; min-width: 0; overflow: hidden; --ov: .4;
  padding: 26px 8px calc(10px + env(safe-area-inset-bottom)); min-height: calc(var(--cw) * 1.5 + 26px); }
.tn-grp { position: relative; display: flex; align-items: flex-end; padding-bottom: 6px; }
.tn-grp.meld::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 4px; border-radius: 2px; background: #1f8f6a; box-shadow: 0 0 8px rgba(31,143,106,.6); }
.tn-grp.dead::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, #e0243a 0 6px, transparent 6px 10px); }
.tn-deadpts { position: absolute; right: -6px; top: -14px; font-style: normal; font: 900 11.5px 'Inter', system-ui, sans-serif; padding: 2px 7px; border-radius: 999px; color: #fff; background: #e0243a; }
.tn-hc { position: relative; flex: none; width: var(--cw); aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: pointer; margin-left: calc(var(--cw) * var(--ov) * -1);
  border-radius: calc(var(--cw) * .1); filter: drop-shadow(0 3px 5px rgba(30,30,40,.28)); transition: transform .16s, filter .2s, opacity .2s; }
.tn-grp .tn-hc:first-child { margin-left: 0; }
/* (on hover only the picture rises: the card's place stays under the pointer, so it does not flicker at its lower edge) */
.tn-hc { touch-action: none; }
.tn-hc .tnsvg { transition: transform .16s; }
.tn-hc.ok:hover { z-index: 5; filter: drop-shadow(0 8px 10px rgba(30,30,40,.35)); }
.tn-hc.ok:hover > .tnsvg { transform: translateY(-18px); }
/* your own groups: a group that is no combination (yet) has a faint line; dragging opens the gaps and shows where it lands */
.tn-grp.loose::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 3px; border-radius: 2px; background: rgba(140,140,150,.35); }
.tn-hand { position: relative; }
.tn-hand.dragging { gap: 34px; }
.tn-hc.dragged { opacity: .25; }
.tn-dragghost { position: fixed; z-index: 96; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0,0,0,.45)); }
.tn-dropmark { position: absolute; top: 18px; bottom: 8px; width: 4px; margin-left: -2px; border-radius: 2px; background: #f2a40c; box-shadow: 0 0 10px rgba(242,164,12,.8); pointer-events: none; }
.tn-dropmark.new { background: #1f8f6a; box-shadow: 0 0 10px rgba(31,143,106,.8); }
.tn-sort { position: absolute; right: 10px; top: 0; padding: 4px 11px; border-radius: 999px; cursor: pointer; font: 800 11px 'Inter', system-ui, sans-serif;
  color: #23262d; background: #fffdf8; border: 1px solid #e3ded4; box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); }
.tn-sort:hover { border-color: #1f8f6a; color: #1f8f6a; }
.tn-hc.no { opacity: .55; cursor: default; }
.tn-hc.close { transform: translateY(-14px); filter: drop-shadow(0 0 0 #f2a40c) drop-shadow(0 0 10px rgba(242,164,12,.9)); }
.tn-hc.came { animation: tnCame .45s cubic-bezier(.3,1.3,.5,1); }
@keyframes tnCame { from { transform: translateY(-70px) scale(.7); opacity: 0; } }
.tn-hc.gone { opacity: 0; transform: translateY(-20px) scale(.9); transition: opacity .1s, transform .1s; }
.tn-hand.dealt .tn-hc { animation: tnDeal .45s cubic-bezier(.3,1.2,.5,1) backwards; }
.tn-hand.dealt .tn-grp:nth-child(1) .tn-hc { animation-delay: .05s; } .tn-hand.dealt .tn-grp:nth-child(2) .tn-hc { animation-delay: .2s; }
.tn-hand.dealt .tn-grp:nth-child(3) .tn-hc { animation-delay: .35s; } .tn-hand.dealt .tn-grp:nth-child(n+4) .tn-hc { animation-delay: .5s; }
@keyframes tnDeal { from { transform: translateY(-160px) rotate(-8deg) scale(.6); opacity: 0; } }
.tn-hc.nope { animation: tnNope .35s; }
@keyframes tnNope { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }

/* ---------- the end of a hand: every hand open ---------- */
.tn-res { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 12px; pointer-events: none; }
.tn-res.hidden { display: none; }
/* (the window takes the table's own colours: a panel the tone of the table, light on the light tables, dark on the dark) */
.tn-res-in { pointer-events: auto; width: min(620px, 100%); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; padding: 16px; border-radius: 24px;
  color: var(--pink, #23262d); background: var(--pan, #fffdf8); border: 1px solid var(--panb, #e3ded4);
  box-shadow: inset 0 0 0 4px var(--pan, #fffdf8), inset 0 0 0 5px var(--panb, #e3ded4), 0 30px 70px -20px rgba(0,0,0,.65); animation: tnIn .3s ease-out; }
@keyframes tnIn { from { transform: scale(.94); opacity: 0; } }
.tn-res-in h3 { margin: 4px 0 10px; text-align: center; font-size: 18px; font-weight: 900; }
.tn-res-note { margin: -4px 0 10px; text-align: center; font-size: 12.5px; font-weight: 800; color: #b9780a; }
.tn-res-rows { display: grid; gap: 7px; }
.tn-rr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 14px; background: var(--pan2, #f5f2ec); }
.tn-rr.win { background: var(--pwin, #eaf7f0); box-shadow: inset 0 0 0 1.5px var(--acc, #1f8f6a); }
.tn-rr.out { background: var(--pout, #fdecee); }
.tn-rn { display: grid; gap: 4px; min-width: 0; }
.tn-rn b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tn-rn b i { font-style: normal; font-size: 10.5px; color: var(--acc, #1f8f6a); }
.tn-rc { display: flex; flex-wrap: wrap; gap: 6px; }
.tn-rg { display: flex; padding-bottom: 3px; border-bottom: 2px solid #1f8f6a; } .tn-rg.dead { border-bottom: 2px dashed #e0243a; }
.tn-rg .tnc.mini { --cw: 20px; margin-left: -6px; } .tn-rg .tnc.mini:first-child { margin-left: 0; }
.tn-rp { font: 900 15px 'Inter', sans-serif; color: var(--pred, #e0243a); font-variant-numeric: tabular-nums; }
.tn-rr .tn-burn { width: 96px; }
.tn-rr .tn-burn b { color: var(--pink, #23262d); } .tn-rr .tn-burn b small { color: var(--pmut, #8a8f99); }
.tn-rr .tn-burn i { background: var(--ptrack, rgba(35,38,45,.12)); }
.tn-res-n { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--pmut, #6b7280); }
/* the window's colours, table by table */
.tnt-terrazzo { --pan: #fbf9f5; --pan2: #f1eee8; --panb: #ddd7cb; }
.tnt-aegean { --pan: #ffffff; --pan2: #eef3fa; --panb: #1d5fb0; --pwin: #e6f0fb; }
.tnt-linen { --pan: #fbf5ea; --pan2: #f1e7d4; --panb: #d8c49e; --pwin: #f6ead2; }
.tnt-olive { --pan: #faf4e8; --pan2: #efe5cf; --panb: #b89a68; --pwin: #eef2e2; }
.tnt-coral { --pan: #fff8f5; --pan2: #fbe9e1; --panb: #efc4b4; --pwin: #fde3d9; }
.tnt-basalt { --pan: #26282d; --pan2: #31343a; --panb: #4a4e56; --pink: #eef0f2; --pmut: #a7adb8; --pred: #ff6b7d;
  --pwin: rgba(47,191,143,.14); --pout: rgba(224,36,58,.16); --ptrack: rgba(255,255,255,.16); }
.tnt-night { --pan: #12213d; --pan2: #1b2e52; --panb: #e9eef6; --pink: #eef3fb; --pmut: #a9b7cf; --pred: #ff7d8c;
  --pwin: rgba(242,184,75,.14); --pout: rgba(224,36,58,.18); --ptrack: rgba(255,255,255,.16); }
.tnt-walnut { --pan: #2e1f14; --pan2: #3c2a1c; --panb: #8a6438; --pink: #f5ead9; --pmut: #c8b49a; --pred: #ff7d6b;
  --pwin: rgba(224,164,58,.16); --pout: rgba(224,36,58,.18); --ptrack: rgba(255,255,255,.16); }

/* ---------- home and my look ---------- */
.hero-tn .tn-art { display: flex; justify-content: center; padding: 4px 0 10px; }
.hero-tn .tn-art img { display: block; width: 100%; max-width: 320px; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.4)); }
.tn-limit { display: grid; grid-template-columns: repeat(3, 1fr); }
.tn-limit button { font-size: 12.5px; font-weight: 900; }
.tn-lk { position: relative; display: block; width: 100%; height: 100%; min-height: 60px; border-radius: 10px; overflow: hidden;
  background: var(--tex), linear-gradient(160deg, var(--t1), var(--t2)); box-shadow: inset 0 0 0 3px var(--rim), inset 0 0 0 4px var(--edge); }
.tn-lk-c { position: absolute; top: 50%; width: 28%; max-width: 46px; aspect-ratio: 2 / 3; filter: drop-shadow(0 3px 4px rgba(30,30,40,.3)); }
.tn-lk-c .tnsvg { width: 100%; height: 100%; display: block; }
.tn-lk-c.b { left: 30%; transform: translate(-50%, -50%) rotate(-9deg); } .tn-lk-c.f { left: 64%; transform: translate(-50%, -50%) rotate(7deg); }
.logo-tn { width: 36px; height: 36px; flex: none; } .logo-tn img { width: 36px; height: 36px; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
/* four players in teams: the partner and the others marked on the seats (as in ludo) */
.seat-wrap.xa-mate .seat-row { box-shadow: inset 3px 0 0 #7fe25a; }
.seat-wrap.xa-foe .seat-row { box-shadow: inset 3px 0 0 #ff7a8a; }
.xa-team { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font: 900 10px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .4px;
  text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.xa-team.mate { background: rgba(127,226,90,.2); color: #b5f58f; border-color: rgba(127,226,90,.55); }
.xa-team.foe { background: rgba(255,122,138,.12); color: #ffb3bd; border-color: rgba(255,122,138,.3); }
.xa-team.foe:hover { background: rgba(127,226,90,.14); color: #d8ffc4; border-color: rgba(127,226,90,.45); }

@media (prefers-reduced-motion: reduce) { .tn-deck.can .tnc.d, .tn-pile.can .tnc.rv.top, .tn-btn, .tn-burn.hot i { animation: none !important; } }

/* ---------- a computer: the tools on the table's corner ---------- */
@media (min-width: 761px) and (min-height: 521px) {
  .tn-wrap { grid-template-rows: minmax(0, 1fr) auto; }
  .tn-top { position: absolute; top: 16px; right: 18px; z-index: 30; padding: 0; background: none; border: 0; box-shadow: none; }
  .tn-top .tn-info { display: none; }
}
/* ---------- a phone ---------- */
@media (max-width: 760px) {
  .tn-wrap { --cw: clamp(40px, 11vw, 56px); }
  .tn-av { width: 34px; height: 34px; padding: 2px; } .tn-pn b { font-size: 11px; max-width: 70px; } .tn-pn small { display: none; }
  .tn-backs { width: 64px; height: 28px; } .tn-backs i { width: 18px; left: calc(var(--k) * 4px); }
  .tn-open { max-width: 150px; gap: 3px 4px; } .tn-og .tnc.mini { --cw: 22px; margin-left: -8px; }
  .tn-burn { width: 84px; }
  .tn-opp.at-l { left: 10px; } .tn-opp.at-r { right: 10px; } .tn-opp.at-t { top: 12px; }
  .tn-dock { padding: 7px 10px; } .tn-who { display: none; }
  .tn-btn { min-width: 0; min-height: 38px; font-size: 13px; }
  .tn-tool { width: 34px; height: 34px; }
  .tn-hand { gap: 8px; }
  .tn-center { top: 56%; }
}
@media (max-width: 760px) and (orientation: portrait) { .tn-table { align-self: center; height: min(100%, 130vw); }
  /* (a narrow table: the others sit in a row along the top, the deck and the river below them) */
  .tn-opp.at-l, .tn-opp.at-r { top: 14px; transform: none; } .tn-opp.at-t { top: 14px; }
  .tn-center { top: 60%; width: 94%; flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  /* (the wild card on a row of its own, above the deck and the river) */
  .tn-wild { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; }
  .tn-wild .tnc { width: calc(var(--cw) * .62); height: calc(var(--cw) * .93); } }
/* ---------- (2026-10-11) closing: rings of light from the discards, a gleam over the table, a small thud ---------- */
.tn-shock { position: absolute; z-index: 7; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none;
  border: 3px solid var(--acc); box-shadow: 0 0 18px var(--acc); animation: tnShock 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.tn-shock.gold { border-color: #f2a40c; box-shadow: 0 0 18px #f2a40c; }
@keyframes tnShock { from { transform: scale(1); opacity: .95; } to { transform: scale(30); opacity: 0; border-width: .4px; } }
.tn-table.closed { animation: tnThud .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes tnThud { 30% { transform: translateY(4px) scale(.995); } 60% { transform: translateY(-2px); } }
.tn-table.closed::after { content: ''; position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%) no-repeat; background-size: 250% 100%; animation: tnSweep 1.2s .15s ease-out both; }
@keyframes tnSweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .tn-shock, .tn-table.closed, .tn-table.closed::after { animation: none !important; display: none; } }
/* dragging a card: the gaps open wider; the discards light up when a card can be let go there; no hand on what cannot be taken */
.tn-hand.dragging { gap: 46px; }
.tn-dropmark.new { width: 6px; margin-left: -3px; }
.tn-pile.drop .tnc.rv.top { box-shadow: 0 0 0 3px var(--acc), 0 0 22px var(--acc); }
.tn-deck:not(.can), .tn-pile:not(.can) { cursor: default; }
.tn-pile.drop { cursor: grabbing; }

/* ---------- (2026-10-11) no bright white bars: the bar under the table a deep glass lit by the table's colour; the
   tools on the table's corner glass in the table's own tone ---------- */
.tn-dock { color: #eef0f2; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 12%, #1b1e24), #14161b);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px -14px rgba(0,0,0,.8); }
.tn-dock.my-turn { border-color: var(--acc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 35%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--acc) 60%, transparent); }
.tn-dock .turnlbl span, .tn-meinfo > small { color: #a7adb8; }
.tn-dock .tn-burn b { color: #eef0f2; } .tn-dock .tn-burn b small { color: #a7adb8; } .tn-dock .tn-burn i { background: rgba(255,255,255,.14); }
.tn-dock .tn-tring { background: rgba(255,255,255,.16); }
.tn-dock.my-turn .tn-tring { background: conic-gradient(var(--acc) calc(var(--k, 1) * 360deg), rgba(255,255,255,.16) 0); }
.tn-dock .tn-avi { box-shadow: 0 0 0 2px #1b1e24; }
.tn-tool { border-radius: 50%; color: var(--ink); background: color-mix(in srgb, var(--t1) 55%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); box-shadow: 0 6px 14px -8px rgba(0,0,0,.45); transition: color .2s, border-color .2s, background .2s; }
.tn-tool.wide { border-radius: 999px; }
.tn-tool:hover { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 60%, transparent); background: color-mix(in srgb, var(--t1) 80%, transparent); }
@media (max-width: 760px), (orientation: landscape) and (max-height: 520px) {
  .tn-top { color: #eef0f2; background: #16181d; border-color: rgba(255,255,255,.08); }
  .tn-top .tn-info { color: #a7adb8; }
  .tn-top .tn-tool { color: #eef0f2; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); box-shadow: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  body.game-thanasis[data-page="table"] .top { display: none; }
  body.game-thanasis[data-page="table"] #table.page { height: 100dvh; margin: 0; padding: max(4px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(2px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .tn-wrap { --cw: clamp(34px, 9.5vh, 50px); gap: 4px; }
  .tn-dock { padding: 4px 8px; gap: 3px; flex-direction: row; justify-content: center; } .tn-who { display: none; }
  .tn-hand { padding-top: 12px; min-height: calc(var(--cw) * 1.5 + 12px); }
  .tn-tool { width: 30px; height: 30px; }
  .tn-btn { min-height: 30px; }
}