/* GOC Games room (t8624) */
.gk-bar .spacer{width:96px;flex:none}
.room-scroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:4px 2px 16px}
.room-sub{margin:2px 0 12px;text-align:center;font-size:16px;color:#e9dcc0}
.tiles{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr;gap:14px;max-width:560px}
.tile{position:relative;display:grid;grid-template-columns:116px 1fr auto;align-items:center;gap:12px;min-height:116px;padding:10px 14px 10px 10px;border-radius:20px;text-decoration:none;color:var(--ink);background:linear-gradient(150deg,rgba(74,39,128,.92),rgba(30,14,54,.92));border:2px solid rgba(255,229,138,.45);box-shadow:0 8px 22px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .1s}
.tile:active{transform:scale(.98)}
.tile .art{position:relative;width:116px;height:96px;border-radius:14px;overflow:hidden;background:#1a0d30 center/cover no-repeat;box-shadow:inset 0 0 0 1.5px rgba(255,229,138,.35)}
.tile .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.tile .txt b{font-size:20px;line-height:1.15;color:var(--gold2)}
.tile .txt small{font-size:15px;line-height:1.3;color:#e3d5b8}
.tile .go{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;background:linear-gradient(180deg,#ffe58a,#f5c542);color:#2a1a00;font-weight:700;font-size:15px;box-shadow:0 2px 0 #8a6414}
.t-mj{background:linear-gradient(150deg,rgba(150,40,95,.92),rgba(58,0,32,.92))}
.t-mem .art{background:radial-gradient(circle at 50% 60%,#4a2780,#1a0d30)}
.t-mem .c1,.t-mem .c2{position:absolute;top:14px;width:40px;height:54px;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.6)}
.t-mem .c1{left:8px;transform:rotate(-12deg)}
.t-mem .c2{left:30px;top:20px;background:#f6ead0;object-fit:contain;padding:4px;transform:rotate(6deg)}
.t-mem .dj{position:absolute;right:-6px;bottom:-4px;width:74px;height:auto}
@media (min-width:700px),(orientation:landscape){.tiles{grid-template-columns:1fr 1fr;max-width:900px}}
/* tfPN9 / t9118u: three columns on wide desktops; 1366 stays at two */
@media (min-width:1600px){.tiles{grid-template-columns:1fr 1fr 1fr;max-width:1380px;gap:18px}}
@media (orientation:landscape) and (max-height:520px){.room-sub{margin:0 0 8px}.tile{min-height:104px}.tile .art{height:84px}}

/* tfPN9i: on every width through 699px (no orientation:portrait gate,
   no display:contents) each Games card is a compact single row, 84–96px:
     thumbnail (~64px) on the left, title + one-line description stacked
     in the middle, PLAY (min 44px) on the right. No empty bottom area,
     so 5–6 games fit on one iPhone screen. How to Play is a compact
     text control in the middle column under the description — it does
     not reserve a 48px third row. Desktop (min-width:700px) stays a
     horizontal row as before. */
@media (max-width:699px){
  .room-sub{margin:0 0 8px;font-size:15px}
  .g-filter{margin:0 auto 10px}
  .room-scroll{padding:2px 2px 10px}
  .tiles{gap:8px}
  .tiles .tile{
    display:grid;
    grid-template-columns:64px minmax(0,1fr) auto;
    grid-template-rows:auto;
    align-items:center;
    column-gap:10px;
    row-gap:0;
    box-sizing:border-box;
    min-height:84px;
    height:88px;
    max-height:96px;
    padding:10px 10px 10px 10px;
    border-radius:16px;
    position:relative;
  }
  .tile .art{
    grid-column:1;
    grid-row:1;
    width:64px;
    height:64px;
    border-radius:10px;
    align-self:center;
    justify-self:start;
    z-index:1;
  }
  .tile .go{
    grid-column:3;
    grid-row:1;
    position:static;
    align-self:center;
    justify-self:end;
    margin-right:0!important;
    z-index:2;
    min-height:44px;
    min-width:44px;
    padding:0 12px;
    font-size:14px;
  }
  .tile .txt{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:2px;
    grid-column:2;
    grid-row:1;
    min-width:0;
    width:auto;
    pointer-events:auto;
    z-index:0;
    padding-top:2px;
    padding-bottom:28px;
  }
  .tile .txt b{
    font-size:16px;
    line-height:1.2;
    min-width:0;
    padding-right:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    overflow-wrap:normal;
    word-wrap:normal;
    pointer-events:auto;
  }
  .tile .txt small{
    min-width:0;
    width:auto;
    max-width:100%;
    font-size:13px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    overflow-wrap:normal;
    pointer-events:auto;
    color:#e3d5b8;
  }
  /* Inner art scaled to the 64px thumb. */
  .t-mem .c1,.t-mem .c2{width:26px;height:36px;top:8px}
  .t-mem .c1{left:4px}
  .t-mem .c2{left:18px;top:12px}
  .t-mem .dj{width:40px;right:-4px;bottom:-2px}
  .t-gf .fish{width:42px;top:10px;left:2px}
  .t-gf .dj{width:36px;right:-6px;bottom:-2px}
  .t-ck .pc{width:30px;height:30px}
  .t-ck .p1{left:4px;top:4px}
  .t-ck .p2{right:4px;bottom:4px}
  .t-fb .fbd{width:28px;height:28px}
  .t-fb .d1{left:4px;top:3px}
  .t-fb .d2{left:32px;top:3px}
  .t-fb .d3{left:4px;top:32px}
  .t-fb .d4{left:32px;top:32px}
  /* How to Play: compact control under the description, middle column.
     Loaded after howto-play.css so these rules win. No 48px reserved row. */
  .tiles li{position:relative;display:block}
  .tiles li > .htp-tile,
  .tile .htp-tile{
    position:absolute;
    left:84px;
    right:5.75rem;
    top:auto;
    bottom:6px;
    margin:0;
    z-index:3;
    min-height:26px;
    height:26px;
    padding:0 8px;
    border-radius:8px;
    border:1px solid rgba(154,240,230,.45);
    background:#102026;
    color:#9af0e6;
    font-weight:700;
    font-size:12.5px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    appearance:none;
    -webkit-appearance:none;
    box-shadow:none;
    max-width:calc(100% - 84px - 5.75rem);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
  }
}

/* Spades / Hearts / Euchre tiles (tfSHE4 colors). */
.t-sp{background:linear-gradient(150deg,rgba(18,72,42,.94),rgba(8,24,14,.96))}
.t-ht{background:linear-gradient(150deg,rgba(112,22,42,.94),rgba(36,6,14,.96))}
.t-sp .art,.t-ht .art{background-color:#122412;background-size:cover;background-position:center}
.t-eu{background:linear-gradient(150deg,rgba(28,58,112,.94),rgba(10,18,40,.96))}
.t-eu .art{background-color:#102038;background-size:cover;background-position:center}



.t-gf{background:linear-gradient(150deg,rgba(14,92,128,.94),rgba(4,30,52,.94))}
.t-gf .art{background:url(img/aquarium-bg.webp) center 30%/cover}
.t-gf .fish{position:absolute;left:6px;top:16px;width:70px;height:auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.t-gf .dj{position:absolute;right:-8px;bottom:-4px;width:64px;height:auto}
.t-ck{background:linear-gradient(150deg,rgba(196,72,130,.94),rgba(44,78,160,.94))}
.t-ck .art{background:conic-gradient(#f7bcd5 0 25%,#8ec3f2 0 50%,#f7bcd5 0 75%,#8ec3f2 0) 0 0/32px 32px}
.t-ck .pc{position:absolute;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),0 4px 8px rgba(0,0,0,.45)}
.t-ck .pc img{width:66%;height:66%;border-radius:50%}
.t-ck .p1{left:8px;top:8px;background:radial-gradient(circle at 38% 30%,#ffc4de,#ef5f9b 52%,#b02862)}
.t-ck .p2{right:8px;bottom:8px;background:radial-gradient(circle at 38% 30%,#b6d2ff,#3f73da 52%,#173f97)}

/* flip-bots-begin (Flip Bots) */
.t-fb{background:linear-gradient(150deg,rgba(150,82,40,.94),rgba(34,40,46,.96))}
.t-fb .art{background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),conic-gradient(#1d6a4f 0 25%,#185a43 0 50%,#1d6a4f 0 75%,#185a43 0) 0 0/48px 48px,#123d2e}
.t-fb .fbd{position:absolute;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 4px 8px rgba(0,0,0,.5)}
.t-fb .fbd::before{content:"";position:absolute;left:17%;right:17%;top:31%;bottom:31%;border-radius:22%/40%;background:#0c1220 center/104% auto no-repeat}
.t-fb .d1{left:10px;top:4px;background:radial-gradient(circle at 36% 28%,#b8cbff,#5c7fdc 20%,#2c4ba6 50%,#162a66 80%,#0b1638)}
.t-fb .d1::before{background-image:url(../flip-bots/img/eyes-tommy.webp)}
.t-fb .d2{left:60px;top:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%233a1606' stroke-opacity='.42'%3E%3Ccircle cx='50' cy='50' r='29' stroke-width='11' stroke-dasharray='9.1 6.1'/%3E%3Ccircle cx='50' cy='50' r='21' stroke-width='6'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='7' fill='%233a1606' fill-opacity='.38'/%3E%3C/svg%3E") center/64% no-repeat,radial-gradient(circle at 36% 28%,#ffe3c9,#f0a46a 18%,#c8682c 48%,#7a3715 78%,#4a1d08)}
.t-fb .d3{left:10px;top:50px;background:radial-gradient(circle at 36% 28%,#ffe1ec,#f39cc0 20%,#d45a8f 50%,#8f2a5a 80%,#521232)}
.t-fb .d3::before{background-image:url(../flip-bots/img/eyes-pinky.webp)}
.t-fb .d4{left:60px;top:50px;background:radial-gradient(circle at 36% 28%,#e6d4ff,#a77cf0 20%,#6c41c4 50%,#3b1d7e 80%,#1f0c47)}
.t-fb .d4::before{background-image:url(../flip-bots/img/eyes-dj.webp)}
.t-fb .d2::before{display:none}
/* flip-bots-end */
.t-pn{background:linear-gradient(150deg,rgba(90,70,30,.94),rgba(28,18,8,.94))}
.t-pn .art{background-color:#1a1230;background-size:cover;background-position:center}
.t-ch{background:linear-gradient(150deg,rgba(30,50,100,.94),rgba(10,14,32,.96))}
.t-ch .art{background-color:#14102a;background-size:cover;background-position:center 42%}

/* t9148u: Games search + filter chips */
.g-filter{max-width:900px;margin:0 auto 16px;padding:0 4px}
.g-search-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.g-search{display:block;width:100%;box-sizing:border-box;min-height:48px;padding:10px 16px 10px 42px;border-radius:16px;border:1.5px solid rgba(255,229,138,.45);background:#1a0d30 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f1d77a' stroke-width='2.2' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5L21 21'/></svg>") 14px 50%/18px no-repeat;color:#f6ead0;font:600 17px/1.3 inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.g-search::placeholder{color:#cbb892;font-weight:500}
.g-search:focus{outline:2px solid #ffe58a;outline-offset:2px;border-color:#ffe58a}
.g-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;justify-content:center}
.g-chip{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(255,229,138,.4);background:linear-gradient(180deg,#43246e,#2a1545);color:#f2e6c9;font:700 15px/1 inherit;cursor:pointer}
.g-chip[aria-pressed="true"]{background:linear-gradient(180deg,#F1D77A,#D4AF37);color:#1A1A1A;border-color:#F6E6A8}
.g-empty{margin:16px 0 4px;text-align:center;color:#f2e6c9;font-size:16px}
@media (min-width:700px),(orientation:landscape){.g-filter{max-width:900px}}
@media (min-width:1600px){.g-filter{max-width:1380px}}
@media (max-width:520px){
  .g-search{min-height:46px;font-size:16px}
  .g-chip{min-height:38px;font-size:14px;padding:0 12px}
}


/* tfPN9i: desktop is also a compact row, not a tall banner. One-line
   description, How to Play sits inside the colored card under the
   description (it is a sibling of .tile on the <li>, so it must be
   absolutely placed — the default stylesheet only styled .tile .htp-tile). */
@media (min-width:700px){
  .tiles{gap:12px}
  .tiles li{position:relative}
  .tiles .tile{
    display:grid;
    grid-template-columns:88px minmax(0,1fr) auto;
    align-items:center;
    column-gap:12px;
    box-sizing:border-box;
    min-height:100px;
    height:112px;
    max-height:128px;
    padding:10px 12px 10px 10px;
    border-radius:18px;
  }
  .tile .art{width:88px;height:72px;border-radius:12px}
  .tile .txt{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:3px;
    min-width:0;
    padding-top:2px;
    padding-bottom:28px;
  }
  .tile .txt b{
    font-size:18px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tile .txt small{
    font-size:14px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  .tile .go{
    margin-right:0!important;
    align-self:center;
    justify-self:end;
    min-height:44px;
    min-width:44px;
  }
  .tiles li > .htp-tile,
  .tile .htp-tile{
    position:absolute;
    left:110px;
    right:6.5rem;
    top:auto;
    bottom:10px;
    margin:0;
    z-index:3;
    min-height:28px;
    height:28px;
    padding:0 10px;
    border-radius:8px;
    border:1px solid rgba(154,240,230,.45);
    background:#102026;
    color:#9af0e6;
    font-weight:700;
    font-size:13px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    appearance:none;
    -webkit-appearance:none;
    box-shadow:none;
    cursor:pointer;
  }
}