/* Size each game from its own play surface, including an installed app window. */
body[data-view="game"] .simple-wrap{width:100%;max-width:1124px}
.play-area{container-type:inline-size;max-width:1100px;margin-inline:auto}
.play-area .table{
  --table-inset:clamp(5px,1.2cqw,16px);
  --card-gap:clamp(3px,.8cqw,10px);
  --card-width:clamp(35px,calc((100cqw - 2 * var(--table-inset) - 6 * var(--card-gap) - 2px) / 7),108px);
  --card-height:calc(var(--card-width) * 1.4);
  --card-font:clamp(15px,calc(var(--card-width) * .3),29px);
  --card-rise:calc(var(--card-font) * 1.15 + 8px);
  --card-step:calc(var(--card-width) + var(--card-gap));
  --layout-rise:calc(var(--card-rise) + 6px);
  padding:0 var(--table-inset) 28px;
  min-height:clamp(440px,65cqw,740px);
  overflow:auto;
  overscroll-behavior-x:contain;
}
#game[data-game="freecell"],#game[data-game="crescent"]{
  --card-width:clamp(34px,calc((100cqw - 2 * var(--table-inset) - 7 * var(--card-gap) - 2px) / 8),108px);
  --card-gap:clamp(3px,.7cqw,9px);
  --card-rise:calc(var(--card-font) * 1.15 + 8px);
}
#game[data-game="spider"],#game[data-game="tripeaks"],#game[data-game="fortythieves"]{
  --card-width:clamp(35px,calc((100cqw - 2 * var(--table-inset) - 9 * var(--card-gap) - 2px) / 10),108px);
  --card-gap:clamp(3px,.6cqw,8px);
  --card-rise:calc(var(--card-font) * 1.15 + 8px);
}
#game[data-game="addiction"],#game[data-game="bakersdozen"]{
  --card-width:clamp(35px,calc((100cqw - 2 * var(--table-inset) - 12 * var(--card-gap) - 2px) / 13),108px);
  --card-gap:clamp(3px,.5cqw,7px);
}
#game[data-game="pyramid"]{
  --card-width:clamp(35px,calc((100cqw - 2 * var(--table-inset) - 6 * var(--card-gap) - 2px) / 7),108px);
}
.table .card,.table .slot{
  width:var(--card-width);height:var(--card-height);min-height:var(--card-height);
  flex-shrink:0;border-radius:clamp(4px,.7cqw,8px);
}
.table .card{isolation:isolate}
.table .card .card-corner{
  display:flex;flex-direction:row;align-items:center;gap:1px;
  left:2px;top:3px;
  font:800 var(--card-font)/1.1 Arial,Helvetica,sans-serif;
  letter-spacing:-.55px;white-space:nowrap;
}
.table .card .card-corner b{font:inherit}
.table .card .card-corner i{
  font:800 calc(var(--card-font) * .88)/1 Arial,Helvetica,sans-serif;
  letter-spacing:0;
}
.table .card .card-corner-bottom{left:auto;top:auto;right:2px;bottom:3px}
/* Keep the illustration between the two rank/suit rows, even on a 35px card. */
.table .card .card-face{inset:12% 0 auto;width:100%;height:76%}
@container(max-width:500px){.table .card .card-face{inset:20% 5% auto;width:90%;height:60%}}
.table .slot{font-size:clamp(23px,calc(var(--card-width) * .43),42px)}
.table .slot[data-action="waste:0"]{font-size:0}
.table .column{width:var(--card-width);min-width:var(--card-width)}
.table .column .card+.card{margin-top:calc(var(--card-rise) - var(--card-height))}
.table .columns,.table .piles{
  width:max-content;max-width:none;gap:var(--card-gap);
  margin-inline:auto;justify-content:safe center;
}
.table .columns{min-height:calc(var(--card-height) + 7 * var(--card-rise))}
.table .piles{margin-block:14px 24px}
#game[data-game="solitaire"] .piles{grid-template-columns:repeat(7,var(--card-width));gap:var(--card-gap)}
#game[data-game="crescent"] .columns{grid-template-columns:repeat(8,var(--card-width))}
.table .hand{gap:var(--card-gap);min-height:var(--card-height)}
.table .card:focus-visible,.table .slot:focus-visible{z-index:3;outline-offset:1px}
.table .status{font-size:clamp(13px,1.55cqw,17px);padding:7px 3px;min-height:32px}
.table .small{font-size:clamp(12px,1.4cqw,15px)}
.table .btn{min-height:36px;font-size:clamp(13px,1.5cqw,16px)}

/* Spit has five stacks. Keep each label below its card rather than letting
   the inline label turn five stacks into a row wider than the table. */
#game[data-game="spit"]{
  --card-width:clamp(45px,calc((100cqw - 2 * var(--table-inset) - 4 * var(--card-gap) - 2px) / 5),108px);
}
#game[data-game="spit"] .piles>.center{
  display:flex;flex-direction:column;align-items:center;
  width:var(--card-width);min-width:0;flex:0 0 var(--card-width);
}
#game[data-game="spit"] .piles>.center>.small{
  display:block;max-width:100%;margin-top:5px;line-height:1.3;overflow-wrap:break-word;
}
#game[data-game="spit"] .card:disabled{opacity:1;filter:none}

/* Eight mahjong tiles fit narrow phones without native button padding
   imposing a minimum grid-track size. */
#game[data-game="mahjong"] .tiles{gap:clamp(3px,.7cqw,7px)}
#game[data-game="mahjong"] .mahjong{min-width:0;padding:0;font-size:clamp(22px,5cqw,30px)}
.simple-playhead{flex-wrap:wrap;gap:6px;padding:8px 4px}
.controls{flex-wrap:wrap;min-width:0}
.controls>a,.controls>button{min-height:36px;display:inline-flex;align-items:center;justify-content:center}

/* Square boards use the available width instead of a fixed desktop size. */
.table .board{width:min(100%,640px);max-width:640px;border-width:clamp(3px,.7cqw,7px)}
.table .board .square{font-size:clamp(25px,7cqw,66px);line-height:1;padding:0}
.table .board .piece{font-size:clamp(18px,3.3cqw,36px)}
.table .sudoku{width:min(100%,600px);max-width:600px}
.table .sudoku input{font-size:clamp(20px,4.8cqw,38px);padding:0;line-height:1;min-height:0}
.table .mineboard{width:min(100%,560px);gap:clamp(2px,.4cqw,4px)}
.table .mine{font-size:clamp(15px,3.6cqw,29px);padding:0;min-width:0}
.table .dice{--dice-gap:clamp(5px,1.2cqw,14px);gap:var(--dice-gap);flex-wrap:wrap}
.table .die{
  --die-size:clamp(40px,calc((100cqw - 2 * var(--table-inset) - 5 * var(--dice-gap) - 4px) / 6),88px);
  width:var(--die-size);height:var(--die-size);flex:0 0 var(--die-size);
  font-size:calc(var(--die-size) * .78);padding:0;line-height:1;
}
.table .scores{max-width:600px;font-size:clamp(13px,1.7cqw,17px)}
.table .scores button{min-height:34px}
.table .two-boards{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2cqw,28px)}
.table .two-boards>div{min-width:0}
.table .ships{width:min(100%,460px);max-width:460px;gap:clamp(2px,.3cqw,3px)}
.table .sea{font-size:clamp(13px,2.6cqw,25px);line-height:1;display:grid;place-items:center}
@container(max-width:680px){.table .two-boards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){body[data-view="game"] .simple-wrap{padding-inline:0}}

/* Keep one placement visible, at least 150px away from game controls.
   These are reserved standard sizes, not live ad units. Never scale or clip
   a future ad creative to fit: request the size that fits its container. */
.advertisement-space{border:0;box-shadow:inset 0 0 0 1px #a5b0c630}
.advertisement-side{display:none}
.advertisement-bottom{display:block;width:250px;margin:150px auto}
.advertisement-bottom .advertisement-space{width:100%;height:250px}
#game-guide{margin:28px auto 0;border-radius:14px;padding-top:22px}
@media(max-width:299px){.advertisement-bottom{display:none}}
@media(min-width:360px){
  .advertisement-bottom{width:320px}
  .advertisement-bottom .advertisement-space{height:100px}
}
@media(min-width:800px){
  .advertisement-bottom{width:728px}
  .advertisement-bottom .advertisement-space{height:90px}
}
@media(min-width:1900px){
  .advertisement-side{display:block;left:calc(100% + 150px);width:160px}
  .advertisement-bottom{display:none}
}