html, body, #root, main.svelte-j11f6v.svelte-j11f6v {
    height: 100%;
    margin: 0;
}
html {
/*
  --s: 102px; 
  --c1: #1c71d8;
  --c2: #1a5fb4;

  --_g:
     var(--c1) 0%  5% ,var(--c2) 6%  15%,var(--c1) 16% 25%,var(--c2) 26% 35%,var(--c1) 36% 45%,
     var(--c2) 46% 55%,var(--c1) 56% 65%,var(--c2) 66% 75%,var(--c1) 76% 85%,var(--c2) 86% 95%,
     #0000 96%;
  background:
    radial-gradient(50% 50% at 100% 0,var(--_g)),
    radial-gradient(50% 50% at 0 100%,var(--_g)),
    radial-gradient(50% 50%,var(--_g)),
    radial-gradient(50% 50%,var(--_g)) calc(var(--s)/2) calc(var(--s)/2)
    var(--c1);
  background-size: var(--s) var(--s);
  */
  --s: 100px; /* control the size*/
  --c1: #62a0ea;
  --c2: #355c7d;
  
  --_g: 
     var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
     var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
  background:
    radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
    radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
    var(--c1);
  background-size: var(--s) var(--s);

}

body {
/*background: radial-gradient(4rem,
    rgba(255,255,255,0) 80%, 
    #778691 80%, #778691 99%, 
    rgba(255,255,255, 0) 
    ) 0 0,
    radial-gradient(4rem,
    rgba(255,255,255,0) 80%, 
    #778691 80%, #778691 99%,  
    rgba(255,255,255, 0) 
    ) 4em 4em,
    radial-gradient(4.7rem,
    rgba(255,255,255,0) 50%, 
    #B1C2B3 50%,
    #B1C2B3 75%, #B1C2B3 99%, 
    rgba(255,255,255, 0) 
    ) 4em 4em,
    radial-gradient(4.7rem,
    rgba(255,255,255,0) 50%, 
    #B1C2B3 50%,
    #F5FCD0 75%, #B1C2B3 99%, 
    rgba(255,255,255, 0) 
    ) 0 0;
  background-size: 8rem 8rem;
  background-color: #F5FCD0;
  */
}

main.svelte-j11f6v.svelte-j11f6v {
    font-family: sans-serif;
    font-size: small;
    display: flex;
    flex-direction: column;
}
.table.svelte-j11f6v.svelte-j11f6v {
    flex: 1;
}
h1.svelte-j11f6v.svelte-j11f6v {
    padding: 0 10px;
}
.hand.svelte-j11f6v.svelte-j11f6v {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.notice.svelte-j11f6v.svelte-j11f6v {
    border: solid 1px steelblue;
    background: lightsteelblue;
    padding: 1em;
    margin: 1em 0;
}
.notice.error.svelte-j11f6v.svelte-j11f6v {
    border: solid 1px coral;
    background: lightcoral;
    border-radius: 5px;
}
.card.svelte-j11f6v.svelte-j11f6v {
    font-size: 1em;
    width: 5em;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: solid 1px #333;
    background: transparent;
    border-radius: 0.25em;
    margin: 0.2em;
    padding: 0;
    overflow: hidden;
    position: relative;
    transition: margin ease .2s;
}
.card.svelte-j11f6v.svelte-j11f6v {
    margin-left: -1.5em;
    margin-right: -1.5em;
}
.card.selected.svelte-j11f6v.svelte-j11f6v, .card.svelte-j11f6v.svelte-j11f6v:focus, .card.svelte-j11f6v.svelte-j11f6v:hover {
    margin-top: -.5em;
    margin-bottom: 1em;
}
.card.svelte-j11f6v.svelte-j11f6v:focus, .card.svelte-j11f6v.svelte-j11f6v:hover {
    margin-right: .5em;
}
.card.svelte-j11f6v.svelte-j11f6v:focus:last-child, .card.svelte-j11f6v.svelte-j11f6v:hover:last-child {
    margin-right: -1.5em;
}
.card svg {
    width: 100%;
    height: 100%}
.card.interactive.svelte-j11f6v.svelte-j11f6v {
    box-shadow: 0 0 0 2px #fff0c4;
}
.card.selected.svelte-j11f6v.svelte-j11f6v {
    box-shadow: 0 0 0 4px #88c9ff;
}
.table.svelte-j11f6v.svelte-j11f6v {
    display: grid;
    grid-template-columns: 25% 1em auto 1em 25%;
    grid-template-rows: 100px 1em auto 1em 60px;
    margin: 10px;
}
.table.svelte-j11f6v .player.svelte-j11f6v {
    background: #f1f1f1;
    border-radius: 5px;
    padding: 0 4px;
}
.table.svelte-j11f6v .player .name.svelte-j11f6v {
    margin: .2em 0;
}
.player.svelte-j11f6v .game.svelte-j11f6v {
    padding: 0.2em 0.2em;
    background: lightblue;
    margin: auto 0.25em;
    font-weight: bold;
}
.player-0.svelte-j11f6v.svelte-j11f6v {
    grid-column-start: 1;
    grid-row-start: 1;
}
.player-1.svelte-j11f6v.svelte-j11f6v {
    grid-column-start: 5;
    grid-row-start: 1;
}
.player-2.svelte-j11f6v.svelte-j11f6v {
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 5;
    grid-row-end: 5;
    text-align: center;
}
.player-2.svelte-j11f6v .name.svelte-j11f6v {
    display: inline-block;
}
.table-center.svelte-j11f6v.svelte-j11f6v {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.player-action.svelte-j11f6v.svelte-j11f6v {
    border: solid 3px #ffc107;
    background: #fff6db;
    padding: 0 1em;
    border-radius: 5px;
}
.tricks.svelte-j11f6v.svelte-j11f6v {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.tricks.svelte-j11f6v .card.svelte-j11f6v {
    border-radius: 0.5em;
}
.tricks.svelte-j11f6v+.player-action.svelte-j11f6v {
    margin-top: 1em;
}
.results.svelte-j11f6v.svelte-j11f6v {
    background: #607d8b;
    padding: 0 1em;
    border-radius: 5px;
    color: #fff;
}
.log.svelte-j11f6v.svelte-j11f6v {
    display:none;
    overflow: auto;
    border-top: solid 1px #ccc;
    padding: 10px;
}
.log.svelte-j11f6v .header.svelte-j11f6v {
    text-align: right;
}
.log.expanded.svelte-j11f6v.svelte-j11f6v {
    height: 8em;
}