body {
background: black url(/images/bg-vertical.jpg) top center no-repeat;
background-size: cover;
}
demo {
display: inline;
font: bold 2rem sans-serif;
color: red;
}
#game-wrap {
max-width: 1400px;
margin: 0 auto;
}
#topmenus {
position: relative;
z-index: 100;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.5rem;
}
body.tutorial-open #topmenus {
display: none;
}
#topmenus>.topmenu-shortcut,
#topmenus>form {
flex: 1;
}
#topmenus>form>.topmenu-shortcut {
width: 100%;
height: 100%;
}
.topmenu {
position: relative;
}
.topmenu-button,
.topmenu-shortcut {
font-size: 1.6rem;
line-height: 1;
padding: 0.1em 0.3em;
cursor: pointer;
background: rgba(255,255,255,0.85);
border: 2px solid #703522;
border-radius: 0.3rem;
}
.topmenu-shortcut {
padding: 0.35em 0.7em;
}
.topmenu-shortcut>span {
margin-left: 0.3em;
font-size: 1rem;
vertical-align: middle;
}
@media (max-width: 800px) {
.topmenu-shortcut>span {
display: none;
}
}
.topmenu-button.round {
width: 2.1rem; height: 2.1rem;
padding: 0;
border-radius: 50%;
font: italic bold 1.4rem/1 serif;
}
.topmenu-content {
display: none;
position: absolute;
top: 100%; left: 0;
background: rgba(255,255,255,0.9);
border: 2px solid #703522;
border-radius: 0.3rem;
margin-top: 0.3rem;
padding: 0.5rem;
min-width: 14rem;
}
.topmenu.open>.topmenu-content {
display: block;
}
.topmenu-content>.menu-item,
.topmenu-content>button {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left;
margin-bottom: 0.4rem;
padding: 0.4rem;
cursor: pointer;
}
.topmenu-content>.menu-item:last-child,
.topmenu-content>button:last-child {
margin-bottom: 0;
}
.topmenu-content>div.menu-item {
cursor: auto;
}
.topmenu-content demo {
font-size: 1.2rem;
}
#shindra-popup-backdrop {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 89;
background: rgba(0,0,0,0.6);
}
#shindra-popup {
position: fixed;
z-index: 90;
background: blue url(/images/bg-popup.jpg) top center no-repeat;
background-size: cover;
}
#shindra-popup>div {
position: absolute;
background: rgba(255,255,255,0.7);
padding: 1em;
}
#shindra-popup form {
font-size: 1.15rem;
}
#shindra-popup form>h3 {
margin: 0;
text-align: center;
font-size: 1.5rem;
}
#shindra-popup form>p {
border: 0;
margin: 1.2em 0 0.3em;
font-weight: bold;
}
#shindra-popup form>label {
display: block;
padding: 0.35em 0.5em;
font-size: 1.25rem;
line-height: 1.3;
cursor: pointer;
border-radius: 0.3rem;
}
#shindra-popup form>label:hover {
background: rgba(255,255,255,0.6);
}
#shindra-popup form>label.new-game-sub {
margin-left: 2em;
font-size: 1.1rem;
}
#shindra-popup form>label.later {
opacity: 0.5;
cursor: default;
}
#shindra-popup form>label.later input[type=radio] {
cursor: default;
}
#shindra-popup form>label.later:hover {
background: none;
}
#shindra-popup form input[type=radio] {
width: 1.2em; height: 1.2em;
vertical-align: -0.2em;
margin-right: 0.4em;
cursor: pointer;
}
#shindra-popup form input[type=submit] {
display: block;
margin: 0 auto;
font-size: 1.2rem;
padding: 0.4em 1.4em;
cursor: pointer;
}
#shindra-popup>.popup-close {
position: absolute;
right: 0.2em; top: 0.2em;
padding: 0.1em 0.5em;
font: bold 1.4rem/1 sans-serif;
cursor: pointer;
}
@media (max-width: 900px) {
#shindra-popup-backdrop {
z-index: 109;
}
#shindra-popup {
top: 0; left: 0; right: 0; bottom: 0;
z-index: 110;
}
#shindra-popup>div {
left: 10%;
top: 1em;
right: 3%;
}
}
@media (min-width: 901px) {
#shindra-popup {
top: 10%; left: 50%; margin-left: -450px;
width: 900px;
min-height: 458px;
box-sizing: border-box;
border: 2px solid black;
max-height: 85vh;
overflow-y: auto;
}
#shindra-popup>div {
position: static;
margin: 40px 40px 40px 257px;
}
}
#log-in-screen {
color: #FFF;
background: #000 url(/images/splash.jpg) top center no-repeat;
background-size: 100% auto;
box-sizing: border-box;
margin: 2em auto;
padding-bottom: 1.5em;
}
#log-in-screen h2 {
margin: 0 0 0.5em;
}
#log-in-screen .auth-tabs {
display: flex;
margin-bottom: 1em;
border-bottom: 2px solid rgba(255,255,255,0.6);
}
#log-in-screen .auth-tabs button {
flex: 1;
font-family: inherit;
font-size: 1em;
line-height: 1.2;
padding: 0.5em 0.2em;
border: none;
border-radius: 0.3em 0.3em 0 0;
background: rgba(0,0,0,0.45);
color: yellow;
}
#log-in-screen .auth-tabs button.is-active {
background: rgba(255,255,255,0.25);
color: #FFF;
font-weight: bold;
cursor: default;
}
#log-in-screen .auth-pane {
display: none;
}
#log-in-screen .auth-pane.is-active {
display: block;
}
#log-in-screen label {
display: block;
margin-bottom: 0.7em;
}
#log-in-screen label.auth-check {
font-size: 0.9em;
}
#log-in-screen input[type=text],
#log-in-screen input[type=email],
#log-in-screen input[type=password] {
width: 100%;
max-width: 20em;
box-sizing: border-box;
padding: 0.3em;
}
#log-in-screen button {
font-size: 1.1em;
padding: 0.3em 1em;
cursor: pointer;
}
#log-in-screen .auth-links {
margin-top: 1.2em;
}
#log-in-screen .auth-links a {
display: block;
padding: 0.6em 0;
font-size: 1.15em;
}
#log-in-screen a {
color: yellow;
}
#log-in-screen .auth-note {
margin: 0.8em 0 0;
font-size: 0.9em;
}
.auth-message {
padding: 0.4em 0.7em;
border-radius: 0.3em;
color: #000;
font-weight: bold;
}
.auth-message.auth-good { background: #9f9; }
.auth-message.auth-bad { background: #f99; }
@media all {
#log-in-screen {
width: 80vw;
min-height: calc(80vw/879*628);
}
#log-in-screen>.auth-box {
margin: 0 20%;
padding-top: calc(80vw/879*628/2);
}
}
@media all and (max-height: 800px) and (orientation:landscape) {
#log-in-screen {
margin-top: 0.2em;
}
}
@media all and (max-width: 800px) and (orientation:portrait) {
#log-in-screen {
width: 90vw;
background-image: url(/images/splash-mobile.jpg);
}
#log-in-screen>.auth-box {
margin: 0 1em;
padding-top: calc(90vw/879*340);
}
}
.shindra-games-list {
border: 2px solid #703522;
margin: 0;
background: rgba(255,255,255,0.7);
}
.shindra-games-list>h2 { text-align: center; }
.shindra-games-list>button { display: block; margin: 1rem auto; font-size: 1.4em }
.shindra-games-list .available_games {
margin: 0.5rem;
}
.shindra-games-list .available_games>div {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.4em;
border: 1px solid #703522;
padding: 0.2em;
}
.shindra-games-list .available_games>div>.sgl-info,
.shindra-games-list .available_games>div>.sgl-button {
flex: 0 0 auto;
}
.shindra-games-list .available_games>div>div.sgl-opponent,
.shindra-games-list .available_games>div>div.sgl-status {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.2em 0.5em;
border-radius: 0.3em;
}
.shindra-games-list .available_games>div>div.sgl-opponent {
flex: 1 1 50%;
background: rgba(255,255,255,0.6);
}
.shindra-games-list .available_games .sgl-avatar {
height: 1.6em; width: 1.6em;
object-fit: cover;
border-radius: 0.2em;
vertical-align: middle;
margin-right: 0.4em;
}
.shindra-games-list .available_games>div>div.sgl-status {
flex: 1 1 50%;
text-align: center;
}
.shindra-games-list .available_games>div>div.sgl-turn { background: #8cf; }
.shindra-games-list .available_games>div>div.sgl-waiting { background: #ccc; }
.shindra-games-list .available_games>div>div.sgl-won { background: #9e9; }
.shindra-games-list .available_games>div>div.sgl-lost { background: #fb7; }
.shindra-games-list .available_games>div>div.sgl-searching,
.shindra-games-list .available_games>div>div.sgl-join { background: rgba(255,255,255,0.85); }
.shindra-games-list .available_games .topmenu.open {
z-index: 20;
}
.shindra-games-list .available_games .topmenu-button.round {
width: 1.6rem; height: 1.6rem;
font-size: 1.1rem;
}
@media (min-width: 801px) {
.shindra-games-list .available_games {
font-size: 150%;
}
.shindra-games-list .available_games .sgl-button {
font-size: inherit;
}
.shindra-games-list .available_games .topmenu-button.round {
width: 2.4rem; height: 2.4rem;
font-size: 1.65rem;
}
.shindra-games-list .available_games .sgl-avatar {
height: 3.2rem; width: 3.2rem;
}
.shindra-games-list .available_games>div>div.sgl-opponent { flex-basis: 35%; }
.shindra-games-list .available_games>div>div.sgl-status { flex-basis: 65%; }
}
.shindra-profile {
border: 2px solid #703522;
margin: 0;
background: rgba(255,255,255,0.7);
text-align: center;
}
.shindra-profile>h2 { text-align: center; }
.shindra-profile>.profile-avatar-row {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.shindra-profile .profile-avatar {
display: block;
flex: none;
width: 7rem; height: 7rem;
object-fit: cover;
border: 2px solid #703522;
border-radius: 0.4rem;
background: rgba(255,255,255,0.6);
}
.shindra-profile .profile-tutorial {
display: flex;
flex: none;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 7rem; height: 7rem;
padding: 0.4rem;
border: 2px solid #703522;
border-radius: 0.4rem;
background: rgba(255,255,255,0.6);
color: #703522;
font-size: 1.1rem;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.shindra-profile .profile-tutorial:hover {
background: #703522;
color: white;
}
.shindra-profile>.profile-username {
font-size: 2.6rem;
font-weight: bold;
margin: 1rem 0.5rem 0.3rem;
overflow-wrap: break-word;
}
.shindra-profile>.profile-email {
margin: 0 0.5rem 0.3rem;
overflow-wrap: break-word;
}
.shindra-profile>.profile-banner {
margin: 0 0.5rem 1rem;
padding: 0.7em 1em;
background: #9f9;
border: 2px solid #060;
border-radius: 0.3rem;
color: #000;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
}
.shindra-profile .profile-email-ok {
color: #060;
font-weight: bold;
white-space: nowrap;
}
.shindra-profile .profile-email-nok {
color: #a00;
}
.shindra-profile>.profile-elo {
margin: 0 0.5rem 1.5rem;
}
.shindra-profile>.profile-history {
margin: 0 0.5rem 1.5rem;
font-size: 0.85em;
}
.shindra-profile>.profile-history>h3 { margin: 0 0 0.4rem; font-size: 1em; }
.shindra-profile .profile-history-line {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
padding: 0.15rem 0;
overflow-wrap: anywhere;
}
.shindra-profile .profile-history-when { opacity: 0.7; }
.shindra-profile .profile-history-what { font-weight: bold; }
.shindra-profile .profile-history-old { text-decoration: line-through; opacity: 0.7; }
.shindra-profile>.profile-forms {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 0.5rem;
text-align: left;
}
.shindra-profile .profile-form {
flex: 1 1 18rem;
max-width: 24rem;
border: 1px solid #703522;
border-radius: 0.3rem;
background: rgba(255,255,255,0.6);
padding: 0.7rem;
}
.shindra-profile .profile-form>h3 { margin: 0 0 0.5rem; }
.shindra-profile .profile-form>p { margin: 0 0 0.7rem; font-size: 0.9em; }
.shindra-profile .profile-form>p:last-child { margin-bottom: 0; }
.shindra-profile .profile-form label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.9em;
}
.shindra-profile .profile-form label>span { display: block; }
.shindra-profile .profile-form input {
width: 100%;
box-sizing: border-box;
padding: 0.3em;
font-size: 1.1rem;
}
.shindra-profile .profile-form button {
font-size: 1.1em;
padding: 0.3em 1em;
cursor: pointer;
}
.shindra-profile .profile-message:not(:empty) {
margin-top: 0.7rem;
font-size: 0.9em;
}
.shindra-profile>.profile-message {
max-width: 22rem;
margin: 0.7rem auto;
text-align: center;
}
.shindra-profile .avatar-choices {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
max-height: 14rem;
overflow-y: auto;
margin-bottom: 0.7rem;
}
.shindra-profile .avatar-choice {
width: 3.4rem; height: 3.4rem;
object-fit: cover;
border: 2px solid transparent;
border-radius: 0.3rem;
cursor: pointer;
}
.shindra-profile .avatar-choice:hover { border-color: white; }
.shindra-profile .avatar-choice.chosen { border-color: red; }
.shindra-profile .faction-choice { margin-bottom: 0.9rem; }
.shindra-profile .faction-choice h4 { margin: 0 0 0.3rem; font-size: 1em; }
.shindra-profile .faction-choice small { font-weight: normal; }
.shindra-profile .faction-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.shindra-profile .faction-row select {
flex: 1 1 auto;
min-width: 0;
padding: 0.3em;
font-size: 1.1rem;
}
.shindra-profile .faction-head {
flex: none;
width: 3.4rem; height: 3.4rem;
object-fit: cover;
border: 2px solid #703522;
border-radius: 0.3rem;
background: rgba(255,255,255,0.6);
}
.shindra-leaderboard {
border: 2px solid #703522;
margin: 0;
padding-bottom: 1rem;
background: rgba(255,255,255,0.7);
text-align: center;
}
.shindra-leaderboard>h2 { margin-bottom: 0.5rem; }
.shindra-leaderboard>.leaderboard-title { margin: 1rem 0.5rem 0.5rem; }
.leaderboard-choice-row {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
justify-content: center;
margin: 0.4rem 0.5rem;
}
.leaderboard-choice-row button {
padding: 0.5em 0.9em;
font-size: 1em;
cursor: pointer;
border: 1px solid #703522;
border-radius: 0.3rem;
background: rgba(255,255,255,0.6);
}
.leaderboard-choice-row button.chosen {
background: #703522;
color: white;
font-weight: bold;
}
.leaderboard-board {
margin: 0 0.5rem;
text-align: left;
}
.leaderboard-line {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: center;
gap: 0.5rem;
padding: 0.3rem 0.4rem;
border-bottom: 1px solid rgba(112,53,34,0.3);
}
.leaderboard-line.me {
background: rgba(255,255,255,0.6);
font-weight: bold;
}
.leaderboard-rank { opacity: 0.7; }
.leaderboard-avatar {
width: 2.2rem; height: 2.2rem;
object-fit: cover;
border: 1px solid #703522;
border-radius: 0.3rem;
}
.leaderboard-name { overflow-wrap: anywhere; }
.leaderboard-value { font-size: 1.2em; font-weight: bold; }
.leaderboard-games { font-size: 0.8em; opacity: 0.7; margin-left: 0.8rem; }
.leaderboard-note {
margin: 1rem 0.5rem 0;
font-size: 0.85em;
opacity: 0.7;
}
@media (min-width: 801px) {
.leaderboard-choices,
.leaderboard-board {
font-size: 150%;
}
.leaderboard-title {
font-size: 1.3em;
}
.leaderboard-avatar {
width: 3.2rem; height: 3.2rem;
}
.leaderboard-note {
font-size: 1.15em;
}
}
.shindra-tutorial {
display: none;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 50;
background: black;
align-items: center;
justify-content: center;
overflow: hidden;
}
.shindra-tutorial.open {
display: flex;
}
.shindra-tutorial>.tutorial-frame {
--frame-width: min(100vw, calc(100vh * 1600 / 2800));
position: relative;
width: var(--frame-width);
height: calc(var(--frame-width) * 2800 / 1600);
font-size: calc(var(--frame-width) * 0.06);
}
.shindra-tutorial .tutorial-screen {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.shindra-tutorial .tutorial-screen.shown {
opacity: 1;
}
.shindra-tutorial .tutorial-text {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #2b1a10;
font-family: "Bangers", sans-serif;
letter-spacing: 0.02em;
line-height: 1;
overflow-wrap: break-word;
}
.shindra-tutorial .tutorial-text>div {
width: 100%;
}
.shindra-tutorial .tutorial-text b {
color: #c1121f;
font-weight: inherit;
}
.shindra-tutorial .tutorial-text h3 {
margin: 0;
color: #003666;
text-align:center;
}
.shindra-tutorial .tutorial-next {
position: absolute;
right: 3%;
bottom: 2%;
font-size: 1em;
font-weight: bold;
padding: 0.4em 1.2em;
cursor: pointer;
color: white;
background: #703522;
border: 0.1em solid white;
border-radius: 0.4em;
}
.shindra-game {
margin: 0;
display: grid;
align-items: start;
column-gap: 1em;
}
@media (min-width: 801px) and (min-height: 601px) {
.shindra-game {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto 1fr;
grid-template-areas:
"info board"
"hand board";
}
.myhand {
margin-top: 9vh;
}
}
@media (max-width: 800px), (max-height: 600px) {
.shindra-game {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"info"
"board"
"hand";
}
}
#gameinfo { grid-area: info; }
.myhand { grid-area: hand; }
#gameboard { grid-area: board; justify-self: center; }
.shindra-game .shindra-topbar {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"status status"
"score1 score2";
gap: 0.5rem;
align-items: start;
}
.shindra-game .shindra-topbar .score {
background: white;
border-radius: 0.4rem;
padding: 0.4rem;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 0.6rem;
}
.shindra-game .shindra-topbar .score-avatar {
flex: 0 0 auto;
width: 3.5rem; height: 3.5rem;
object-fit: cover;
border-radius: 0.3rem;
}
.shindra-game .shindra-topbar .score-text {
min-width: 0;
}
.shindra-game .shindra-topbar .score-name {
margin: 0;
overflow-wrap: break-word;
}
.shindra-game .shindra-topbar .score1 { grid-area: score1; }
.shindra-game .shindra-topbar .score2 { grid-area: score2; }
.shindra-game .shindra-topbar .statusbar {
grid-area: status;
background: white;
border: 2px solid red;
border-radius: 0.4rem;
padding: 1rem;
font-size: 1.5rem;
text-align: center;
}
#gameboard {
position: relative;
background: url(/images/gameboard.webp);
background-size: cover;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
#gameboard>.cell {
flex: 1 1 25%;
height: 25%;
box-sizing: border-box;
}
#gameboard>.cell.empty { cursor: pointer; }
@media (hover: hover) {
#gameboard>.cell.empty:hover { border: 0.5em solid red }
}
#gameboard>.cell.empty.drag-over { border: 0.5em solid red }
.myhand {
position: relative;
}
.myhand>.card {
position: absolute;
transition-duration: 0.3s;
touch-action: none;
cursor: grab;
user-select: none;
}
.myhand>.card:active { cursor: grabbing; }
.card {
position: relative;
box-sizing: border-box;
border-radius: 0.5em;
width: 10vh; height: 14.5vh;
perspective: 60vh;
transition: top 1s, left 1s, transform 1s, width 1s, height 1s;
}
.card-inner {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform 0.4s;
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
box-sizing: border-box;
border: 1px solid black;
border-radius: 0.5em;
background-size: cover;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
}
.card[state="hand"] {
cursor: pointer;
}
.card[state="selected"] {
cursor: pointer;
border: 5px solid red;
}
.endgame-buttons {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: 0.5em;
margin: 1em 0;
}
button.rematch,
button.backtolist {
font-size: clamp(0.9rem, 4.5vw, 1.5rem);
padding: 0.5em 0.8em;
min-width: 0;
white-space: nowrap;
}
.shindra-game.picking-cards {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"info"
"choice";
}
.cards-choice {
grid-area: choice;
display: flex;
align-items: flex-start;
gap: 1em;
margin-top: 1em;
}
.cards-choice .cc-side {
flex: 1 1 50%;
min-width: 0;
box-sizing: border-box;
padding: 0.5em;
border: 2px solid #703522;
border-radius: 0.4rem;
background: rgba(255,255,255,0.7);
}
.cards-choice h3 { margin: 0 0 0.3rem; }
.cards-choice .cc-count { font-size: 1.5rem; margin-bottom: 0.4rem; }
.cards-choice .cc-zone {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.3em;
min-height: 16vh;
padding: 0.4em;
box-sizing: border-box;
border: 2px dashed #703522;
border-radius: 0.4rem;
background: rgba(255,255,255,0.5);
}
.cards-choice .cc-zone.drag-over {
border-style: solid;
border-color: red;
}
.cards-choice .card.choice-card {
width: 8vh;
height: 11.6vh;
transition: none;
touch-action: none;
cursor: grab;
user-select: none;
}
.cards-choice .card.choice-card:active { cursor: grabbing; }
.cards-choice .card.choice-card.sliding { transition: transform 0.4s; }
.cards-choice .cc-confirm {
display: block;
margin: 0.6em auto 0;
font-size: 1.4em;
background: #9e9;
}
.cards-choice.cc-waiting .cc-side { flex: 1 1 100%; }
.cards-choice.cc-waiting .card.choice-card { cursor: default; }
@media (max-width: 800px), (max-height: 600px) {
.cards-choice { flex-direction: column; }
.cards-choice .cc-side { width: 100%; }
.cards-choice .cc-count { font-size: 1.2rem; }
}