body {
background:#101c2b;color:#e7edf2
}
.game-header {
max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 30px;border-bottom:1px solid #ffffff1c
}
.game-header img {
width:200px;background:white;padding:8px 12px;border-radius:5px
}
.back-link {
font-size:14px;text-underline-offset:5px
}
.game-wrap {
max-width:1180px;margin:auto;padding:34px 30px
}
.game-title {
display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px
}
.game-title h1 {
font-size:48px;margin:12px 0
}
.game-title h1 span {
font-weight:400
}
.eyebrow {
color:#efabb7
}
.game-title p {
color:#b7c6d2
}
.tool,select {
font:inherit;border:1px solid #526378;border-radius:6px;padding:11px 15px;background:#1a2b3f;color:white;cursor:pointer;min-height:44px
}
.setup {
padding:56px 24px;text-align:center;background:#183d50;border:1px solid #3c6275;border-radius:12px
}
.setup h2 {
font-size:36px
}
.setup p {
max-width:560px;margin:0 auto 26px;color:#d1dfe6
}
.setup label {
display:block;font-size:13px;margin:16px 0 10px
}
.setup-controls {
display:flex;gap:12px;justify-content:center;flex-wrap:wrap
}
.seats {
display:flex;gap:12px;margin-bottom:18px
}
.seat {
flex:1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#1b2b3f;border:2px solid transparent;padding:14px 18px;border-radius:8px
}
.seat span {
color:#b9c8d4;font-size:14px
}
.seat.active {
border-color:#edb747;background:#263a4c
}
.board {
background:#173d50;border:1px solid #456777;border-radius:12px;padding:20px 24px;display:grid;gap:12px
}
.suit-row {
display:grid;grid-template-columns:36px 1fr 90px 1fr;align-items:center;gap:16px;border-bottom:1px solid #ffffff18;padding-bottom:12px
}
.suit-row:last-child {
border:0;padding:0
}
.suit-label {
font-size:32px
}
.red {
color:#bd1531
}
.suit-label {
color:#fff
}
.suit-row.red .suit-label {
color:#ffb0bd
}
.pile {
display:flex;justify-content:center;align-items:center;gap:14px;position:relative;min-height:100px;padding-top:18px
}
.pile small {
position:absolute;top:0;font-size:9px;letter-spacing:.1em;color:#b8cbd5
}
.pile.seven {
padding-top:0
}
.empty {
width:68px;height:82px;border:1px dashed #8aabbc;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#bbced9;font-size:13px
}
.closed {
color:#c6e1cf;font-size:11px
}
.playing-card {
width:64px;height:82px;flex-shrink:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:#fffdf8;color:#1a293a;border:2px solid #e0e4e7;border-radius:7px;font:22px/1.1 Arial,sans-serif;box-shadow:0 3px 6px #0003;padding:7px
}
.playing-card span {
font-size:28px;margin-top:4px
}
.playing-card.red {
color:#bd1531
}
.turn-panel {
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0;min-height:82px
}
.turn-panel p {
font-weight:bold;color:#f2d48c
}
.hand-zone {
border-top:1px solid #ffffff26;padding-top:20px
}
.hand-zone h2 {
font-size:13px;letter-spacing:.08em;margin:0 0 10px
}
.hand-hint {
font-size:12px;color:#a9bccb;margin-bottom:18px
}
.hand {
display:flex;gap:10px;flex-wrap:wrap;padding:6px 2px 22px
}
.hand button {
cursor:pointer;transition:transform .15s
}
.hand button:disabled {
opacity:.65;cursor:default
}
.hand button.legal {
border-color:#efbd55;box-shadow:0 0 0 2px #efbd5540
}
.hand button.legal:hover {
transform:translateY(-6px)
}
.rules,.events {
border-top:1px solid #ffffff26;margin-top:24px
}
.rules summary,.events summary {
cursor:pointer;padding:18px 0;font-weight:bold
}
.rules>div {
max-width:850px;color:#c0cfdb;font-size:14px
}
.events>div {
max-height:300px;overflow:auto;color:#b3c7d5;font-size:13px
}
.events p {
margin:0 0 8px
}
.game-footer {
margin-top:40px;font-size:11px;letter-spacing:.1em;color:#8fa6b9
}
[hidden] {
display:none!important
}
@media(max-width:650px) {
.game-header {
padding:16px 18px
}
.game-header img {
width:150px
}
.game-wrap {
padding:24px 16px
}
.game-title {
align-items:flex-start
}
.game-title h1 {
font-size:36px
}
.game-title p {
font-size:14px
}
.game-title .eyebrow {
font-size:9px
}
.tool {
padding:8px;font-size:12px;white-space:nowrap
}
.seats {
gap:6px;flex-wrap:wrap
}
.seat {
flex:1 1 40%;padding:9px 12px
}
.board {
padding:16px 10px
}
.suit-row {
gap:5px
}
.suit-label {
font-size:24px
}
.pile {
gap:4px;flex-direction:column;padding-top:20px;min-height:110px
}
.pile small {
letter-spacing:0
}
.pile .playing-card,.empty {
width:48px;height:66px;font-size:18px
}
.pile .playing-card span {
font-size:23px
}
.closed {
font-size:9px
}
.hand {
gap:7px
}
.hand .playing-card {
width:53px;height:74px;font-size:19px
}
.setup {
padding:34px 18px
}
.setup h2 {
font-size:28px
}

}
@media(prefers-reduced-motion:reduce) {
.hand button {
transition:none
}

}
@media(max-width:650px) {
.game-header {
flex-wrap:wrap;gap:10px
}
.back-link {
display:inline-flex;align-items:center;min-height:44px;font-size:14px
}
.game-title {
flex-wrap:wrap
}
.game-title .tool {
white-space:normal;min-height:44px
}
.setup-controls .button {
width:100%;gap:8px;padding:14px 10px
}
.suit-row {
grid-template-columns:20px minmax(0,1fr) 48px minmax(0,1fr)
}
.pile small {
font-size:9px;white-space:nowrap
}
.seat {
min-width:0
}
.hand-hint {
font-size:14px
}
.rules>div {
font-size:15px
}

}

/* Mobile usability review 2026-10-31 */

.mobile-swipe-tip{display:none}
/* Ristiseiska 2.0 — pelipöytä ja oma käsi samaan näkymään (03.11.2026) */
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 14px;
  align-items: start;
}
.game-sidebar {
  min-width: 0;
  padding: 13px;
  background: #1b2b3f;
  border: 1px solid #456777;
  border-radius: 12px;
}
/* Työpöydällä tiivis pöytä: omat kortit eivät enää ole pelipöydän alapuolella. */
.ristiseiska-playing .game-header {padding: 9px 24px;}
.ristiseiska-playing .game-header img {width: 132px;padding: 5px 9px;}
.ristiseiska-playing .game-wrap {padding: 12px 24px 24px;}
.ristiseiska-playing .game-title {margin-bottom: 8px;gap: 12px;}
.ristiseiska-playing .game-title h1 {font-size: 31px;line-height: 1.05;margin: 4px 0 2px;}
.ristiseiska-playing .game-title p {margin: 2px 0;font-size: 12px;}
.ristiseiska-playing .game-title .eyebrow {font-size: 10px;}
.ristiseiska-playing .game-title .tool {padding: 7px 10px;min-height: 37px;font-size: 12px;}
.ristiseiska-playing #player-count {margin: 0 0 7px;font-size: 12px;}
.ristiseiska-playing .seats {gap: 7px;margin-bottom: 10px;}
.ristiseiska-playing .seat {padding: 8px 10px;gap: 7px;flex-wrap: nowrap;font-size: 13px;}
.ristiseiska-playing .seat span {font-size: 12px;}
.ristiseiska-playing .board {padding: 11px 13px;gap: 5px;}
.ristiseiska-playing .suit-row {
  grid-template-columns: 28px minmax(0,1fr) 66px minmax(0,1fr);
  gap: 9px;
  min-height: 73px;
  padding-bottom: 5px;
}
.ristiseiska-playing .suit-row:last-child {padding-bottom: 0;}
.ristiseiska-playing .suit-label {font-size: 27px;}
.ristiseiska-playing .pile {min-height: 68px;gap: 4px;padding-top: 11px;flex-direction: row;}
.ristiseiska-playing .pile.seven {padding-top: 0;}
.ristiseiska-playing .pile small {font-size: 8px;letter-spacing: .035em;top: 0;white-space: nowrap;}
.ristiseiska-playing .pile .playing-card,
.ristiseiska-playing .pile .empty {width: 46px;height: 58px;font-size: 18px;}
.ristiseiska-playing .pile .playing-card span:not(.card-back-emblem),
.ristiseiska-playing .pile .playing-card.red span:not(.card-back-emblem) {font-size: 23px;}
.ristiseiska-playing .empty {font-size: 11px;}
.ristiseiska-playing .turn-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 0 0 10px;
  min-height: 0;
}
.ristiseiska-playing .turn-panel p {margin: 0;font-size: 13px;line-height: 1.35;}
.ristiseiska-playing .turn-actions {display: flex;flex-wrap: wrap;gap: 8px;}
.ristiseiska-playing .turn-actions .button {min-height: 38px;padding: 7px 11px;font-size: 12px;}
.ristiseiska-playing .hand-zone {padding-top: 9px;}
.ristiseiska-playing .hand-zone h2 {margin: 0 0 5px;font-size: 12px;}
.ristiseiska-playing .hand-zone .hand-hint {font-size: 11px;line-height: 1.35;margin: 0 0 8px;}
.ristiseiska-playing .hand {display: flex;flex-wrap: wrap;gap: 6px;padding: 3px 0 0;align-content: flex-start;}
.ristiseiska-playing .hand .playing-card {width: 51px;height: 65px;padding: 3px;font-size: 18px;}
.ristiseiska-playing .hand .playing-card span {font-size: 23px;margin-top: 2px;}
.ristiseiska-playing .rules,
.ristiseiska-playing .events {margin-top: 12px;}
.ristiseiska-playing .rules summary,
.ristiseiska-playing .events summary {padding: 10px 0;}
.ristiseiska-playing .game-footer {margin-top: 16px;}
/* Kaatunut pino: näkyvä korttien kuvioitu taustapuoli, ei ässä/kuningas. */
.playing-card.card-back {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: repeating-linear-gradient(45deg,#7b132c 0,#7b132c 5px,#b52a48 5px,#b52a48 8px);
  border: 3px solid #f4e9db;
  box-shadow: 2px 3px 0 #263a4c, 4px 5px 0 #f4e9db70, 0 3px 8px #0006;
  color: #fff9ee;
  padding: 4px;
}
.playing-card.card-back::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #fff8ea;
  border-radius: 2px;
  background: #801a35aa;
}
.playing-card.card-back .card-back-emblem {
  z-index: 1;
  color: #fff6e6;
  font-size: 18px;
  text-shadow: 0 1px 2px #0009;
  margin: 0;
}
.ristiseiska-playing .pile .closed {
  position: absolute;
  bottom: -1px;
  right: 0;
  z-index: 1;
  background: #173d50;
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 9px;
  line-height: 1.1;
  color: #e1efe5;
}
@media (max-width: 900px) {
  .game-layout {grid-template-columns: 1fr;gap: 10px;}
  .ristiseiska-playing .board {padding: 10px 14px;}
  .ristiseiska-playing .suit-row {grid-template-columns: 28px minmax(0,1fr) 66px minmax(0,1fr);}
  .ristiseiska-playing .game-sidebar {padding: 10px;}
  .ristiseiska-playing .hand {flex-wrap: nowrap;overflow-x: auto;overscroll-behavior-x: contain;scroll-snap-type: x proximity;padding: 5px 2px 12px;}
  .ristiseiska-playing .hand .playing-card {flex: 0 0 51px;scroll-snap-align: start;}
  .ristiseiska-playing .hand-zone .hand-hint {margin-bottom: 4px;}
}
@media (max-width: 650px) {
  .ristiseiska-playing .game-header {padding: 7px 12px;gap: 6px;flex-wrap: nowrap;}
  .ristiseiska-playing .game-header img {width: 115px;padding: 4px 7px;}
  .ristiseiska-playing .back-link {font-size: 11px;min-height: 34px;}
  .ristiseiska-playing .game-wrap {padding: 8px 10px 18px;}
  .ristiseiska-playing .game-title {flex-wrap: nowrap;align-items: center;gap: 6px;}
  .ristiseiska-playing .game-title h1 {font-size: 25px;margin: 2px 0;}
  .ristiseiska-playing .game-title p {font-size: 11px;line-height: 1.25;}
  .ristiseiska-playing .game-title .eyebrow {font-size: 8px;}
  .ristiseiska-playing .game-title .tool {font-size: 10px;max-width: 128px;padding: 5px 6px;line-height: 1.25;min-height: 34px;}
  .ristiseiska-playing #player-count {font-size: 11px;margin-bottom: 5px;}
  .ristiseiska-playing .seats {flex-wrap: nowrap;gap: 3px;margin-bottom: 7px;}
  .ristiseiska-playing .seat {flex: 1 1 0;min-width: 0;display: block;text-align: center;padding: 6px 2px;line-height: 1.2;font-size: 11px;}
  .ristiseiska-playing .seat span {display:block;font-size: 9px;white-space: nowrap;}
  .ristiseiska-playing .board {padding: 8px 8px;gap: 2px;}
  .ristiseiska-playing .suit-row {grid-template-columns: 20px minmax(0,1fr) 48px minmax(0,1fr);gap: 4px;min-height: 61px;padding-bottom: 3px;}
  .ristiseiska-playing .suit-label {font-size: 22px;}
  .ristiseiska-playing .pile {flex-direction: row;padding-top: 9px;min-height: 56px;}
  .ristiseiska-playing .pile small {font-size: 7px;letter-spacing: 0;}
  .ristiseiska-playing .pile .playing-card,
  .ristiseiska-playing .pile .empty {width: 39px;height: 49px;font-size: 15px;}
  .ristiseiska-playing .pile .playing-card span:not(.card-back-emblem) {font-size: 20px;}
  .ristiseiska-playing .empty {font-size: 10px;}
  .ristiseiska-playing .game-sidebar {padding: 8px;}
  .ristiseiska-playing .turn-panel {padding: 0 0 6px;gap: 4px;}
  .ristiseiska-playing .turn-panel p {font-size: 12px;}
  .ristiseiska-playing .hand-zone {padding-top: 6px;}
  .ristiseiska-playing .hand-zone h2 {font-size: 12px;margin-bottom: 2px;}
  .ristiseiska-playing .hand-zone .hand-hint {font-size: 10px;}
  .ristiseiska-playing .hand .playing-card {width: 48px;height: 62px;flex-basis: 48px;font-size: 17px;}
  .ristiseiska-playing .hand .playing-card span {font-size: 22px;}
  .ristiseiska-playing .closed {font-size: 8px;}
}

@media (max-width: 900px){
  .ristiseiska-playing .mobile-swipe-tip {display:block;margin:0 0 4px;color:#c6d7e3;font-size:11px;}
}


/* Ristiseiska 2.3 — säilytetään 2.0:n hyvä oikeanpuoleinen käsikorttiasettelu. */
.board{position:relative;isolation:isolate;overflow:hidden}
.board > *{position:relative;z-index:1}
.board::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../tikkipokka/assets/mitroplast-logo.png") center/290px auto no-repeat;
  opacity:.12;filter:grayscale(1) brightness(0) invert(78%) sepia(19%) saturate(725%) hue-rotate(166deg) brightness(83%) contrast(89%);
}
/* Nimenomaan pelipöydän korttien kohdalle lisätilaa tekstin ja kortin väliin. */
.ristiseiska-playing .pile:not(.seven){padding-top:17px;min-height:74px}
.ristiseiska-playing .pile small{top:0;font-size:9px;line-height:1.1}
/* Kaatuneen pinon kortin selkäpuoli, jossa MitroPlast-logo. */
.card-back{
  width:64px;height:82px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  position:relative;border-radius:8px;
  background:repeating-linear-gradient(135deg,#861631 0 8px,#aa2343 8px 16px);
  border:3px solid #f4f0ea;box-shadow:3px 4px 0 rgba(224,231,238,.35),0 4px 8px #0004;
}
.card-back::before{content:"";position:absolute;inset:4px;border:1px solid #fff9ed;border-radius:4px}
.card-back__logo{
  position:relative;z-index:1;width:70%;height:40%;
  background:url("../tikkipokka/assets/mitroplast-logo.png") center/contain no-repeat;
  filter:brightness(0) invert(1);
}
.ristiseiska-playing .pile .card-back{width:46px;height:58px}
/* Näytä viimeksi pelattu kortti myös silloin, kun pino on jo kaatunut. */
.game-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-bottom:7px;min-height:25px}
.game-meta .hand-hint{margin:0}
.last-played{margin:0;max-width:100%;padding:3px 9px;border:1px solid #b18c4d;border-radius:6px;background:#273849;color:#ffdf9e;font-size:13px;font-weight:700;line-height:1.3}
.playing-card.last-played-card,.card-back.last-played-card{outline:3px solid #f2c45d;outline-offset:2px;box-shadow:0 0 0 5px rgba(242,196,93,.18),0 3px 9px #0005}
@media(max-width:900px){
  .board::before{background-size:180px auto;opacity:.11}
}
@media(max-width:650px){
  .ristiseiska-playing .pile:not(.seven){padding-top:14px;min-height:59px}
  .ristiseiska-playing .pile small{font-size:7px}
  .ristiseiska-playing .pile .card-back{width:39px;height:49px;border-width:2px}
  .game-meta{align-items:flex-start;gap:4px 8px;margin-bottom:6px}
  .last-played{font-size:11px;padding:3px 7px}
  .playing-card.last-played-card,.card-back.last-played-card{outline-width:2px;outline-offset:2px}
}