/* Lobby 1.18: every game is a card of the same size and frame as the daily gift,
   and the games turn endlessly in one row. Sizes come from the room itself (a size
   container), so the row fits every landscape screen without scrolling. */
@property --card-w{syntax:'<length>';inherits:true;initial-value:0px}
@property --card-h{syntax:'<length>';inherits:true;initial-value:0px}
@property --gap{syntax:'<length>';inherits:true;initial-value:0px}
@property --col-gap{syntax:'<length>';inherits:true;initial-value:0px}
@property --intro-w{syntax:'<length>';inherits:true;initial-value:0px}
@property --dots-h{syntax:'<length>';inherits:true;initial-value:0px}
@property --rim{syntax:'<length>';inherits:true;initial-value:0px}
@property --plate{syntax:'<length>';inherits:true;initial-value:0px}
@property --visible{syntax:'<integer>';inherits:true;initial-value:2}

body:not(.game-active) #lobby-view{max-width:2560px}
#lobby-view .lobby-room{display:block;position:relative;height:100%;min-height:0;container:room/size}

/* --- The row: intro · games · gift -------------------------------------- */
#lobby-view .lobby-stage{
  --visible:2;
  --intro-w:clamp(104px,17.5cqw,420px);
  --col-gap:clamp(10px,2cqw,40px);
  --gap:clamp(8px,1.3cqw,26px);
  --dots-h:clamp(24px,4.6cqh,48px);
  --pad-y:clamp(3px,1.6cqh,18px);
  --h-max:calc(100cqh - var(--dots-h) - 2 * var(--pad-y));
  --w-fit:calc((100cqw - var(--intro-w) - 2 * var(--col-gap) - (var(--visible) - 1) * var(--gap)) / (var(--visible) + 1));
  --card-w:min(var(--w-fit),calc(var(--h-max) * .66));
  --card-h:min(var(--h-max),calc(var(--card-w) / .53));
  --plate:clamp(4px,calc(var(--intro-w) * .03),10px);
  position:relative;display:flex;align-items:center;justify-content:center;gap:var(--col-gap);height:100%;
}
@container room (width >= 1500px) and (aspect-ratio >= 19/10){#lobby-view .lobby-stage{--visible:3}}
/* A quiet pool of shade keeps the gold frames readable on the bright palace. */
#lobby-view .lobby-stage:before{content:'';position:absolute;z-index:-1;pointer-events:none;left:calc(var(--intro-w) * .6);right:0;top:calc(50% - var(--card-h) * .62);height:calc(var(--card-h) * 1.24);background:radial-gradient(closest-side,#06120fb8,#06120f5c 62%,transparent)}

#lobby-view .lobby-intro{flex:none;width:var(--intro-w);max-height:var(--card-h);margin-bottom:var(--dots-h);justify-content:center;gap:clamp(5px,2.2cqh,26px)}
/* On low phones the intro may also use the height of the pager row. */
@container room (height < 340px){#lobby-view .lobby-intro{max-height:calc(var(--card-h) + var(--dots-h));margin-bottom:0}}
#lobby-view .game-gallery{flex:none;position:relative;width:calc(var(--visible) * var(--card-w) + (var(--visible) - 1) * var(--gap));height:calc(var(--card-h) + var(--dots-h));max-height:none;min-width:0;perspective:none;isolation:isolate}

/* --- The endless strip ---------------------------------------------------- */
#lobby-view .gallery-viewport{position:absolute;top:0;height:var(--card-h);left:calc(-1 * var(--col-gap));right:calc(-1 * var(--col-gap));overflow-x:clip;overflow-y:visible;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#lobby-view .game-tile{
  --rim:clamp(8px,calc(var(--card-w) * .066),30px);
  --ease:cubic-bezier(.25,.8,.25,1);
  position:absolute;top:0;left:var(--col-gap);z-index:1;
  width:var(--card-w);height:var(--card-h);
  container:tile/size;
  translate:calc(var(--x,0) * (var(--card-w) + var(--gap)) + var(--drag,0px)) 0;
  transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0px));
  background:#0b1d18;
  box-shadow:0 14px 16px -10px #000e,0 3px 9px #0008;
  transition:translate var(--slide,.78s) var(--ease),opacity .55s ease,visibility 0s,transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease;
}
#lobby-view .game-tile:nth-child(2){--x:1}
#lobby-view .game-tile:nth-child(3){--x:2}
#lobby-view .game-tile:nth-child(4){--x:3}
#lobby-view .game-tile.is-out{opacity:0;visibility:hidden;transition:translate var(--slide,.78s) var(--ease),opacity .42s ease,visibility 0s linear var(--slide,.78s),transform .5s,box-shadow .45s}
#lobby-view .game-tile.is-warping{transition:none!important}
#lobby-view .game-gallery.is-fast{--slide:.42s}
#lobby-view .game-gallery.is-dragging .game-tile{transition-property:opacity,visibility,transform,box-shadow}
#lobby-view .game-gallery.is-dragging{cursor:grabbing}

/* --- Card art, painted frame and inner shade ------------------------------- */
#lobby-view .tile-art{position:absolute;inset:calc(var(--rim) * .35);z-index:0;display:block;padding:0;border:0;border-radius:0;overflow:hidden;background:#0b1d18;cursor:pointer}
#lobby-view .tile-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focus,50% 50%);transform:scale(var(--zoom,1.02));transform-origin:var(--zoom-at,50% 35%);filter:saturate(1.1) brightness(1.05) contrast(1.03);transition:transform 1.2s cubic-bezier(.2,.7,.3,1),filter .6s ease;-webkit-user-drag:none}
#lobby-view .tile-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#04100dbd 0%,#04100d4d 14%,transparent 26%),linear-gradient(0deg,#051410 0%,#071a15f5 22%,#0a211bd1 38%,#0c261f70 54%,transparent 68%);box-shadow:inset 0 0 calc(var(--rim) * 1.5) #000d,inset 0 0 0 1px #0009}
#lobby-view .tile-horus{--focus:83% 50%;--zoom:1.08;--zoom-at:72% 22%}
#lobby-view .tile-pharaoh{--focus:50% 0%;--zoom:1.02;--zoom-at:50% 18%}
#lobby-view .tile-anubis{--focus:69% 50%;--zoom:1.1;--zoom-at:64% 30%}
#lobby-view .tile-ra{--focus:67% 50%;--zoom:1.06;--zoom-at:64% 24%}
#lobby-view .is-soon .tile-art img{filter:saturate(.95) brightness(.9) contrast(1.04)}

#lobby-view :is(.game-tile,.daily-card,.empty-favorites)>.tile-frame{position:absolute;inset:0;z-index:3;pointer-events:none;border-style:solid;border-color:transparent;border-width:var(--rim) var(--rim) calc(var(--rim) * 1.096);border-image:url('../assets/images/lobby-card-frame-1.18.webp') 94 94 103 94 / var(--rim) var(--rim) calc(var(--rim) * 1.096) stretch;filter:drop-shadow(0 1px 1px #000c) drop-shadow(0 0 calc(var(--rim) * .35) #000a)}
#lobby-view .tile-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,30%),#fff4c45c 0%,#ffe39612 32%,transparent 60%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s ease}
#lobby-view .game-tile.is-tilting .tile-glare{opacity:1}

/* --- Badges and the favourite star ------------------------------------------ */
#lobby-view .tile-badge{position:absolute;z-index:4;pointer-events:none;top:calc(var(--rim) + 3.2cqw);left:calc(var(--rim) + 3.2cqw);max-width:calc(100% - 2 * var(--rim) - 20cqw);display:inline-flex;align-items:center;gap:.5em;padding:.66em 1.1em .6em;border-radius:2em;font:700 clamp(6px,2.45cqw,10.5px)/1 var(--font);letter-spacing:.16em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ffe6a3;background:linear-gradient(#245146ee,#0e2923f2);border:1px solid #f0cf86;box-shadow:inset 0 1px #fff2c04d,0 0 0 1px #08171399,0 3px 8px #000a;text-shadow:0 1px 1px #07140f}
#lobby-view .tile-badge.is-new{color:#fff1c4;border-color:#b2c8ff;background:linear-gradient(#2c49b0f2,#121f68f5)}
#lobby-view .tile-badge.is-soon{color:#ffdb86;border-color:#e3c27a;background:linear-gradient(#41301af2,#1b1309f5)}
#lobby-view .tile-badge svg{width:1.3em;height:1.3em;stroke-width:2.2;margin:-.2em 0}
#lobby-view .game-tile .favorite-button{position:absolute;z-index:4;top:calc(var(--rim) + 2.4cqw);right:calc(var(--rim) + 2.4cqw);left:auto;width:clamp(24px,11cqw,44px);height:clamp(24px,11cqw,44px);padding:0;border-radius:50%;border:1px solid #f0cd86;color:#ffe6a6;background:radial-gradient(circle at 50% 28%,#3a8b77,#15443a 58%,#0b2722);box-shadow:inset 0 1px #fff3c45e,0 0 0 2px #08171399,0 4px 9px #000b;transition:transform .25s,background .3s,box-shadow .3s}
#lobby-view .game-tile .favorite-button svg{width:50%;height:50%;stroke-width:1.9}
#lobby-view .game-tile .favorite-button:hover{transform:scale(1.08)}
#lobby-view .game-tile .favorite-button.selected{color:#5b3910;border-color:#fff1bf;background:radial-gradient(circle at 50% 28%,#fff0b4,#e1ae4d 55%,#a8742a);box-shadow:inset 0 1px #fff9df,0 0 0 2px #08171399,0 0 16px #f3c45c99}
#lobby-view .game-tile .favorite-button.selected svg{fill:#7a4e17;stroke:#5b3910}

/* --- Titles and the call to play ------------------------------------------- */
#lobby-view .tile-content{position:absolute;z-index:4;left:calc(var(--rim) + 4cqw);right:calc(var(--rim) + 4cqw);bottom:calc(var(--rim) + 4.4cqw);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
#lobby-view .tile-content :is(a,button){pointer-events:auto}
#lobby-view .tile-eyebrow{margin:0 0 2.6cqw;font:700 clamp(6px,2.35cqw,10px)/1.45 var(--font);letter-spacing:.2em;color:#ffe2a0;text-shadow:0 1px 2px #06130f,0 0 8px #000;text-wrap:balance}
#lobby-view .tile-kicker{font:400 clamp(11px,7.2cqw,32px)/1.04 var(--serif);letter-spacing:.02em;color:#fff0c6;text-shadow:0 2px 3px #06130f,0 0 16px #000b}
#lobby-view .tile-title{margin:.8cqw 0 0;max-width:100%;font:700 clamp(12px,11.6cqw,54px)/1 var(--serif);letter-spacing:.05em;color:#ffe08f;text-wrap:balance;background:linear-gradient(180deg,#fffbe4 8%,#ffe598 36%,#f1bb55 64%,#b98030 88%,#e5b15a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;filter:drop-shadow(0 1px 0 #6a4416) drop-shadow(0 2px 0 #2c1b07) drop-shadow(0 4px 6px #000d)}
#lobby-view .tile-features{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.2em .55em;margin:2.8cqw 0 0;font:700 clamp(7px,3cqw,12.5px)/1.3 var(--font);letter-spacing:.02em;color:#f4e6c2;text-shadow:0 1px 2px #05110d,0 0 8px #000}
#lobby-view .tile-features i{font-style:normal;font-size:.6em;color:#eec468}
#lobby-view .tile-cta{display:flex;justify-content:center;align-items:center;gap:0;width:100%;margin:4.6cqw 0 0;pointer-events:none}
#lobby-view .tile-cta .button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:min(100%,86cqw);height:clamp(26px,13cqw,54px);min-height:0;padding:0 1em;gap:.55em;border-radius:999px;font:700 clamp(9px,4.3cqw,17px)/1 var(--font);letter-spacing:.02em;white-space:nowrap;text-decoration:none;transform:none;transition:filter .2s,box-shadow .25s,translate .15s}
#lobby-view .tile-cta .button svg{width:1.05em;height:1.05em}
#lobby-view .tile-cta .button.gold{color:#422b0e;text-shadow:0 1px #ffefc4;border:1.5px solid #ffe8a3;background:linear-gradient(#ffeba6db,#f0c262a6 46%,#b8822bd6),url('../assets/images/sandstone-seamless.png') center/300px;box-shadow:0 .2em 0 #7a5219,0 .34em 0 #3b2910,0 .6em 1.1em #000a,inset 0 2px 2px #fff6c8,inset 0 -3px 4px #9a6823}
#lobby-view .tile-cta .button.gold svg:first-child{fill:currentColor;stroke-width:1}
#lobby-view .tile-cta .button.stone{color:#ffe6a3;text-shadow:0 1px 2px #04120e;border:1.5px solid #e3c47c;background:linear-gradient(#2d6d5ee8,#133b32f0 58%,#0b2823f5),url('../assets/images/lobby-stone-1.11.png') center/240px;box-shadow:0 .2em 0 #081a15,0 .34em 0 #030c0a,0 .6em 1.1em #000a,inset 0 1px #fff0b455,inset 0 -2px 4px #031410}
#lobby-view .tile-cta .button:hover{transform:none;filter:brightness(1.12)}
#lobby-view .tile-cta .button.gold:hover{box-shadow:0 .2em 0 #7a5219,0 .34em 0 #3b2910,0 .6em 1.4em #000a,0 0 1.4em #ffcf6a8c,inset 0 2px 2px #fff6c8,inset 0 -3px 4px #9a6823}
#lobby-view .tile-cta .button:active{translate:0 .12em}
#lobby-view .tile-note{display:inline-flex;align-items:center;gap:.6em;margin-top:3.2cqw;font:500 clamp(6px,2.55cqw,10.5px)/1.2 var(--font);letter-spacing:.04em;color:#ece6c9;text-shadow:0 1px 2px #05110d}
#lobby-view .tile-note i{flex:none;width:.5em;height:.5em;border-radius:50%;background:#bfe7a6;box-shadow:0 0 .7em #c4f0a6}
#lobby-view .is-soon .tile-note i{background:#f1c86b;box-shadow:0 0 .7em #f6c964}

@media (hover:hover){
  #lobby-view .game-tile:not(.is-out):hover{--lift:-6px;box-shadow:0 24px 24px -16px #000e,0 4px 10px #0008,0 0 0 1px #ffe3a040,0 0 calc(var(--rim) * 1.2) #f6c75a40}
  #lobby-view .game-tile:hover .tile-art img{transform:scale(calc(var(--zoom,1.02) + .05))}
  #lobby-view .game-tile.is-soon:hover .tile-art img{filter:saturate(1.05) brightness(1.02)}
}

/* Narrow and low cards keep the essentials: badge, name and the button. */
#lobby-view .tile-cta .cta-short{display:none}
@container tile (width < 160px){#lobby-view .tile-cta .cta-long{display:none}#lobby-view .tile-cta .cta-short{display:inline}}
@container tile (width < 200px){#lobby-view .tile-badge{letter-spacing:.08em;padding:.55em .8em .5em}}
@container tile (width < 135px){#lobby-view .tile-badge{display:none}}
@container tile (width < 250px){#lobby-view .tile-eyebrow{display:none}}
/* A tagline is not part of the name: small cards drop it first. */
@container tile (width < 200px){#lobby-view .tile-kicker.is-tagline{display:none}}
@container tile (width < 205px){#lobby-view :is(.tile-features,.tile-note){display:none}#lobby-view .tile-cta{margin-top:5.5cqw}}
@container tile (height < 330px){#lobby-view :is(.tile-eyebrow,.tile-note){display:none}}
@container tile (height < 250px){#lobby-view .tile-features{display:none}}

/* --- The pager: arrows flank the turning dots -------------------------------- */
#lobby-view .catalog-pager{position:absolute;left:0;right:0;bottom:0;height:var(--dots-h);display:flex;align-items:center;justify-content:center;gap:clamp(6px,calc(var(--card-w) * .04),16px);z-index:5}
#lobby-view .game-gallery .catalog-nav-btn{--arrow:clamp(22px,calc(var(--dots-h) * .86),40px);position:relative;inset:auto;flex:none;width:var(--arrow);height:var(--arrow);padding:0;display:grid;place-items:center;translate:none;transform:none;border-radius:50%;cursor:pointer;font-size:0;color:#ffeab0;border:1px solid #ffe4a0;background:radial-gradient(circle at 50% 26%,#3d937f 0%,#184b3f 46%,#0a2621 100%);box-shadow:0 0 0 2px #09201b,0 0 0 3px #d4ab5c,0 0 0 4px #09201bcc,0 5px 10px #000b,inset 0 1px 1px #ffffff5c,inset 0 -3px 5px #03140f;transition:scale .25s ease,filter .25s ease}
#lobby-view .game-gallery .catalog-nav-btn svg{width:50%;height:50%;stroke-width:2.6;filter:drop-shadow(0 1px 1px #000b)}
/* Small arrows on phones keep a finger-sized target. */
#lobby-view .game-gallery .catalog-nav-btn:before{content:'';position:absolute;inset:-5px -8px;border-radius:50%}
#lobby-view .game-gallery .catalog-nav-btn.prev svg{scale:-1 1}
#lobby-view .game-gallery .catalog-nav-btn:hover{scale:1.1;filter:brightness(1.18)}
#lobby-view .game-gallery .catalog-nav-btn:active{scale:.94}
#lobby-view .game-gallery .catalog-dots-bar{position:static;inset:auto;height:100%;display:flex;align-items:center;justify-content:center;gap:0}
#lobby-view .catalog-dot{--dot:clamp(7px,calc(var(--dots-h) * .26),11px);position:relative;display:grid;place-items:center;height:100%;min-width:0;padding:0 clamp(3px,calc(var(--dot) * .5),6px);border:0;background:none;cursor:pointer}
#lobby-view .catalog-dot i{position:relative;display:block;width:var(--dot);height:var(--dot);border-radius:99px;overflow:hidden;border:1px solid #e7c679;background:#0c2620e6;box-shadow:0 0 0 1px #07161299,0 1px 3px #000a,inset 0 1px 1px #000a;transition:width .5s cubic-bezier(.3,.8,.3,1),background .3s,border-color .3s}
#lobby-view .catalog-dot.in-view i{background:#6a5223;border-color:#f5d68f}
#lobby-view .catalog-dot:hover i{background:#8a6a2c}
#lobby-view .catalog-dot.active i{width:calc(var(--dot) * 4.4);background:#2c210d;border-color:#fff0bd;box-shadow:0 0 0 1px #07161299,0 0 10px #f6c86680}
#lobby-view .catalog-dot.active i:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#fff3b5,#e9b54e);transform-origin:0 50%;animation:gallery-dot-fill var(--autoplay,7s) linear both paused}
#lobby-view .game-gallery.is-playing .catalog-dot.active i:after{animation-play-state:running}
@keyframes gallery-dot-fill{from{scale:0 1}to{scale:1 1}}

/* --- Favourites: one centred card or the empty tablet ----------------------- */
#lobby-view[data-shown="favorites"] .game-tile:not(#game-card){display:none}
#lobby-view[data-shown="favorites"] .game-gallery .catalog-pager{display:none}
#lobby-view .game-gallery .empty-favorites{--rim:clamp(8px,calc(var(--card-w) * .066),30px);position:absolute;z-index:2;top:0;left:50%;translate:-50% 0;width:var(--card-w);height:var(--card-h);min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--card-w) * .045);padding:calc(var(--rim) + var(--card-w) * .07);border:0;border-radius:0;border-image:none;text-align:center;background:radial-gradient(ellipse at 50% 34%,#f7cd6a29,transparent 66%),linear-gradient(#1c5246e6,#0b2924f2),url('../assets/images/lobby-stone-1.11.png') center/420px;box-shadow:0 14px 16px -10px #000e,0 3px 9px #0008}
#lobby-view .game-gallery .empty-favorites>svg{width:calc(var(--card-w) * .16);height:calc(var(--card-w) * .16);color:#ffe08f;filter:drop-shadow(0 2px 2px #000a)}
#lobby-view .game-gallery .empty-favorites h3{font:400 clamp(14px,calc(var(--card-w) * .085),36px)/1.1 var(--serif);color:#fff0c6;text-shadow:0 2px 3px #06130f}
#lobby-view .game-gallery .empty-favorites p{font-size:clamp(8px,calc(var(--card-w) * .037),15px);line-height:1.5;color:#e6e4c8}
#lobby-view .game-gallery .empty-favorites .button{min-height:0;height:clamp(26px,calc(var(--card-w) * .12),48px);padding:0 1.4em;border-radius:999px;font-size:clamp(9px,calc(var(--card-w) * .042),16px);color:#ffe6a3;border:1.5px solid #e3c47c;background:linear-gradient(#2d6d5ee8,#133b32f0)}

/* --- The daily gift: the same card, frame and size ---------------------------- */
#lobby-view .daily-card{
  --rim:clamp(8px,calc(var(--card-w) * .066),30px);
  container:daily/size;
  position:relative;flex:none;width:var(--card-w);height:var(--card-h);min-height:0;max-height:none;margin:0 0 var(--dots-h);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:calc(var(--rim) + var(--card-w) * .06) calc(var(--rim) + var(--card-w) * .055) calc(var(--rim) + var(--card-w) * .05);
  border:0;border-radius:0;overflow:hidden;text-align:center;isolation:isolate;
  background:radial-gradient(ellipse 85% 42% at 50% 55%,#f8cf6c33,transparent 70%),linear-gradient(#21604fdb,#0e332ce8 55%,#0a2521f2),url('../assets/images/lobby-stone-1.11.png') center/440px;
  box-shadow:0 14px 16px -10px #000e,0 3px 9px #0008;
}
#lobby-view .daily-card:before{content:none}
#lobby-view .daily-card:after{content:'';position:absolute;inset:var(--rim);z-index:0;width:auto;height:auto;border:0;border-radius:0;pointer-events:none;background:linear-gradient(180deg,#04100d70,transparent 30%,transparent 70%,#04100d8c);box-shadow:inset 0 0 calc(var(--rim) * 1.5) #000c}
#lobby-view .daily-card>:not(.tile-frame,.lobby-fx-frame){position:relative;z-index:2}
#lobby-view .daily-card .daily-text{flex:none;max-width:100%}
#lobby-view .daily-card .daily-text .small-label{display:block;font:700 clamp(6px,calc(var(--card-w) * .0245),10.5px)/1.4 var(--font);letter-spacing:.2em;color:#ffe2a0;text-shadow:0 1px 2px #06130f}
#lobby-view .daily-card .daily-text h3{margin:calc(var(--card-w) * .026) 0 0;font:400 clamp(15px,calc(var(--card-w) * .088),40px)/1.08 var(--serif);color:#fff0c4;text-shadow:0 2px 2px #142312,0 0 18px #000a}
#lobby-view .daily-card .daily-text p{margin-top:calc(var(--card-w) * .022);font:500 clamp(7px,calc(var(--card-w) * .033),13.5px)/1.4 var(--font);color:#e6e7cb;text-shadow:0 1px 2px #06130f}
#lobby-view .daily-card .daily-streak-track{flex:none;margin:calc(var(--card-w) * .036) 0 0;padding:calc(var(--card-w) * .024) calc(var(--card-w) * .028);border-radius:calc(var(--card-w) * .03);border-color:#e3c27a73;background:#071b16d9}
#lobby-view .daily-card .streak-step-circle{width:clamp(14px,calc(var(--card-w) * .066),26px);height:clamp(14px,calc(var(--card-w) * .066),26px);font-size:clamp(7px,calc(var(--card-w) * .029),11px)}
#lobby-view .daily-card .streak-step-label{font-size:clamp(5px,calc(var(--card-w) * .023),8.5px)}
#lobby-view .daily-card .gift-art{position:relative;inset:auto;flex:1 1 0;width:100%;height:auto;min-height:0;margin:calc(var(--card-h) * .018) 0 calc(var(--card-h) * .01);transform:none;scale:1;opacity:1}
#lobby-view .daily-card .daily-reward{flex:none;gap:calc(var(--card-w) * .01)}
#lobby-view .daily-card .daily-reward strong{font:700 clamp(20px,calc(var(--card-w) * .128),58px)/1 var(--serif)}
#lobby-view .daily-card .daily-reward>span{font:700 clamp(6px,calc(var(--card-w) * .024),10px)/1.3 var(--font);letter-spacing:.18em}
#lobby-view .daily-card .gift-claim{flex:none;width:min(100%,calc(var(--card-w) * .86));height:clamp(26px,calc(var(--card-w) * .13),54px);min-height:0;margin-top:calc(var(--card-w) * .046);padding:0 1em;gap:.55em;border-radius:999px;font:700 clamp(9px,calc(var(--card-w) * .043),17px)/1 var(--font);white-space:nowrap}
#lobby-view .daily-card .gift-claim svg{width:1.1em;height:1.1em}
#lobby-view .daily-card .daily-footnote{flex:none;margin-top:calc(var(--card-w) * .032);font:500 clamp(6px,calc(var(--card-w) * .0255),10.5px)/1.2 var(--font);letter-spacing:.04em}
/* Container sizes here are the padded inside of the card. */
@container daily (height < 400px){#lobby-view .daily-card .daily-text p{display:none}}
@container daily (height < 280px){#lobby-view .daily-card .daily-footnote{display:none}}
@container daily (height < 190px){#lobby-view .daily-card .daily-text h3{display:none}#lobby-view .daily-card .gift-art{margin:2px 0}}

/* The light that runs along each frame follows the frame's real width. */
#lobby-view :is(.game-tile,.daily-card) .lobby-fx-frame{--fx-rim:var(--rim);border-radius:0;z-index:3}

/* --- The intro tablets share the painted frame ------------------------------ */
#lobby-view .lobby-welcome h2{font-size:clamp(16px,calc(var(--intro-w) * .105),46px)}
#lobby-view .lobby-welcome .eyebrow{font-size:clamp(6px,.55cqw,10px)}
#lobby-view .lobby-intro-copy{font-size:clamp(10px,.82cqw,15px)}
#lobby-view :is(.journey-card,.mission-banner){position:relative;isolation:isolate;border:var(--plate) solid transparent;border-image:url('../assets/images/lobby-plate-frame-1.18.webp') 47 47 51 47 / var(--plate) var(--plate) calc(var(--plate) * 1.085) stretch;border-radius:0;background:linear-gradient(#184a3ee6,#0d2c26f0),url('../assets/images/lobby-stone-1.11.png') center/380px;box-shadow:0 8px 14px -6px #000c,inset 0 0 calc(var(--plate) * 2) #0009;text-shadow:0 1px 2px #04120e}
#lobby-view .journey-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.5em .85em;margin:0;padding:clamp(6px,.75cqw,15px) clamp(7px,.85cqw,17px)}
#lobby-view .journey-card>span{min-width:0;font-size:clamp(9px,.78cqw,15px)}
#lobby-view .journey-card>span small{font-size:clamp(8px,.66cqw,12.5px)}
#lobby-view .journey-card>.progress-track,#lobby-view .journey-card>small{grid-column:1/-1}
#lobby-view .journey-card>small{font-size:clamp(7px,.6cqw,11px)}
#lobby-view .journey-icon{width:clamp(22px,1.9cqw,38px);height:clamp(26px,2.25cqw,44px);font-size:clamp(14px,1.2cqw,24px)}
#lobby-view .mission-banner{padding:clamp(6px,.8cqw,16px) clamp(7px,.9cqw,18px)}
#lobby-view .mission-banner h3{font-size:clamp(10px,.8cqw,15px)}
#lobby-view .mission-banner .small-label{font-size:clamp(6px,.48cqw,9px)}
#lobby-view .mission-banner .text-button{font-size:clamp(9px,.72cqw,13.5px)}

/* The mission's call is a small gold-rimmed pill, like the buttons on the cards. */
#lobby-view .mission-banner .text-button{display:inline-flex;align-items:center;gap:.5em;min-height:0;height:auto;padding:.42em 1.05em .4em;border:1px solid #e3c47c;border-radius:999px;color:#ffe6a3;background:linear-gradient(#2c6b5ce6,#123b32f0);box-shadow:0 2px 0 #071a15,0 3px 6px #0008,inset 0 1px #fff0b44d;text-shadow:0 1px 2px #04120e;transition:filter .2s,translate .15s}
#lobby-view .mission-banner .text-button:hover{filter:brightness(1.15)}
#lobby-view .mission-banner .text-button:active{translate:0 1px}
#lobby-view .mission-banner .text-button svg{width:1.15em;height:1.15em}
/* Narrow rooms: the reward line and the jackpot caption step aside rather than wrap. */
#lobby-view .journey-level-bonus{white-space:nowrap}
@container room (width < 1100px){#lobby-view .journey-level-bonus{display:none}}
body:not(.game-active) .jackpot-label,body:not(.game-active) .jackpot-digits{white-space:nowrap}
@media (max-width:1180px){body:not(.game-active) .jackpot-label{display:none}}