/* Grouplet v2 - solid, responsive game-specific tiles.
   Shared headings, results, modes and chrome remain owned by Game Presentation. */
.page-grouplet{
 --gl-tile-fill:#E6E8EC;
 --gl-tile-ink:#292D36;
 --gl-selected-fill:#C8D5EA;
 --gl-selected-ink:#1F344E;
 --gl-control-fill:#E9EAED;
 --gl-control-active:#FFFFFF;
 --gl-life-fill:#454D5C;
 --gl-life-empty:#D9DBE0;
 --gl-focus:#6386B6;
 --gl-cell-height:clamp(56px,8.2dvh,94px);
 --gl-tile-gap:clamp(6px,.8vw,10px);
}
:root[data-theme="dark"] .page-grouplet{
 --gl-tile-fill:#454953;
 --gl-tile-ink:#F4F4F6;
 --gl-selected-fill:#65748D;
 --gl-selected-ink:#FFFFFF;
 --gl-control-fill:#3B404A;
 --gl-control-active:#626977;
 --gl-life-fill:#D6DBE3;
 --gl-life-empty:#535965;
 --gl-focus:#A9B9D9;
}
.page-grouplet .gl-stage,
.page-grouplet .gl-preview{
 box-sizing:border-box;position:relative;
 width:min(100%,760px);max-width:760px;margin-inline:auto;
}
.page-grouplet .gl-stage{
 display:flex;flex-direction:column;align-items:stretch;justify-content:center;
 gap:clamp(9px,1.2dvh,16px);min-height:0;
}
.page-grouplet .gl-board{
 box-sizing:border-box;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
 align-content:start;width:100%;gap:var(--gl-tile-gap);
}
.page-grouplet .gl-preview{
 aspect-ratio:auto;align-content:center;
 grid-template-rows:repeat(4,var(--gl-cell-height));
}
.page-grouplet .gl-tile{
 box-sizing:border-box;display:flex;align-items:center;justify-content:center;
 width:100%;height:var(--gl-cell-height);min-height:0;min-width:0;
 padding:clamp(4px,.65vw,11px);
 border:0!important;outline:0;
 border-radius:clamp(9px,1.15vw,16px);
 background:var(--gl-tile-fill)!important;color:var(--gl-tile-ink)!important;
 box-shadow:inset 0 -2px 0 rgba(0,0,0,.025);
 font-family:inherit;font-size:clamp(12px,1.15vw,17px);
 font-weight:750;letter-spacing:-.025em;line-height:1.16;
 overflow-wrap:anywhere;word-break:normal;text-align:center;
 user-select:none;cursor:pointer;
 transition:background .21s,transform .24s cubic-bezier(.2,.85,.3,1),box-shadow .21s;
 -webkit-tap-highlight-color:transparent;
}
.page-grouplet .gl-tile-preview{cursor:default;pointer-events:none;}
.page-grouplet .gl-tile.gl-selected{
 background:var(--gl-selected-fill)!important;color:var(--gl-selected-ink)!important;
 box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--gl-selected-ink) 12%,transparent);
 transform:translateY(-2px);
}
.page-grouplet .gl-tile:focus-visible{
 outline:2px solid var(--gl-focus);outline-offset:3px;
}
.page-grouplet .gl-tile.gl-wrong{animation:gl-shake .34s ease;}
.page-grouplet .gl-play-status{
 display:flex;align-items:center;justify-content:space-between;
 box-sizing:border-box;width:100%;min-height:28px;
 font-size:13px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
}
.page-grouplet .gl-score{font-size:clamp(14px,1.5vw,19px);font-weight:790;letter-spacing:-.02em;}
.page-grouplet .gl-lives{display:inline-flex;align-items:center;gap:7px;}
.page-grouplet .gl-lives-label{
 margin-right:3px;font-size:12px;font-weight:600;color:var(--muted);
}
.page-grouplet .gl-life-dot{
 display:block;flex:none;width:clamp(12px,1.25vw,17px);height:clamp(12px,1.25vw,17px);
 border-radius:50%;background:var(--gl-life-fill);
 transition:transform .24s,opacity .24s,background .24s;
}
.page-grouplet .gl-life-dot.gl-life-spent{
 background:var(--gl-life-empty);transform:scale(.77);opacity:.53;
}
.page-grouplet .gl-solved{
 box-sizing:border-box;width:100%;display:flex;flex-direction:column;
 align-items:stretch;gap:var(--gl-tile-gap);
}
.page-grouplet .gl-solved-row{
 box-sizing:border-box;width:100%;min-height:var(--gl-cell-height);
 background:var(--gl-colour);color:#242834;
 border:0;border-radius:clamp(9px,1.15vw,16px);
 padding:clamp(6px,.9vw,12px);
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
 text-align:center;overflow-wrap:anywhere;
}
.page-grouplet .gl-solved-row strong{font-size:clamp(12px,1.17vw,17px);font-weight:800;line-height:1.12;letter-spacing:.01em;}
.page-grouplet .gl-solved-row small{font-size:clamp(10px,1vw,13px);line-height:1.2;font-weight:530;}
.page-grouplet .gl-status{
 box-sizing:border-box;width:100%;text-align:center;min-height:19px;
 font-size:12px;color:var(--muted);line-height:1.4;
}
.page-grouplet .gl-confidence{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:7px;width:100%;
}
.page-grouplet .gl-small{
 font-size:12px;color:var(--muted);margin:0;
}
.page-grouplet .gl-confidence-options{
 box-sizing:border-box;display:flex;gap:4px;
 width:min(100%,440px);max-width:440px;margin-inline:auto;
 background:var(--gl-control-fill);border:0;border-radius:13px;padding:4px;
}
.page-grouplet .gl-conf-choice{
 display:flex;flex-direction:row;align-items:center;justify-content:center;
 gap:7px;flex:1;min-width:0;border:0;border-radius:10px;
 background:transparent;color:var(--text);cursor:pointer;
 font-size:clamp(11px,1vw,13px);font-weight:650;padding:10px 3px;
 white-space:nowrap;transition:background .2s,box-shadow .2s;
}
.page-grouplet .gl-conf-choice[aria-pressed="true"]{
 background:var(--gl-control-active);box-shadow:0 1px 5px rgba(0,0,0,.1);
 font-weight:800;
}
.page-grouplet .gl-conf-points{font-size:11px;font-variant-numeric:tabular-nums;opacity:.7;}
.page-grouplet .gl-actions{
 box-sizing:border-box;display:flex;justify-content:center;
 width:100%;gap:clamp(6px,1vw,12px);
}
.page-grouplet .gl-actions button{
 flex:1;min-width:0;max-width:250px;white-space:nowrap;padding-inline:8px;
}
.page-grouplet .gl-actions button:disabled{opacity:.45;}
.page-grouplet .gl-error{font-size:13px;color:#BB5959;}
.page-grouplet .gl-particle-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.page-grouplet .gl-float{
 position:absolute;transform:translate(-50%,0);
 font-size:clamp(19px,2.2vw,29px);font-weight:850;white-space:nowrap;
 text-shadow:0 2px 10px var(--canvas);
 animation:gl-float 1.1s cubic-bezier(.14,.72,.26,1) forwards;
}
.page-grouplet .gl-float-good{color:#369771;}
.page-grouplet .gl-float-bad{color:#C65D68;}
:root[data-theme="dark"] .page-grouplet .gl-float-good{color:#83E4B3;}
:root[data-theme="dark"] .page-grouplet .gl-float-bad{color:#F3A0A9;}
.page-grouplet .gl-confetti{
 position:absolute;left:var(--x);top:-14px;width:8px;height:13px;
 border-radius:2px;opacity:0;animation:gl-confetti 1.5s var(--delay) ease-out forwards;
}
/* End-screen recap: a compact colour map of *every* confirmed guess. */
.page-grouplet .gl-recap{
 box-sizing:border-box;width:100%;max-width:100%;
 margin:10px auto 0;display:flex;flex-direction:column;gap:clamp(13px,1.8dvh,19px);
 text-align:left;
}
.page-grouplet .gl-recap-heading{
 margin:0;font-size:clamp(15px,1.6vw,19px);font-weight:800;text-align:center;
}
.page-grouplet .gl-recap-section-head{
 display:flex;align-items:center;justify-content:space-between;gap:10px;
 font-size:13px;margin-bottom:9px;
}
.page-grouplet .gl-recap-section-head span{font-size:12px;color:var(--muted);}
.page-grouplet .gl-guess-list{display:flex;flex-direction:column;gap:7px;}
.page-grouplet .gl-guess-row{
 box-sizing:border-box;width:100%;
 display:grid;grid-template-columns:20px minmax(0,1fr) 48px;
 gap:8px;align-items:center;
}
.page-grouplet .gl-guess-number{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;}
.page-grouplet .gl-guess-blocks{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;
 width:100%;min-width:0;
}
.page-grouplet .gl-guess-block{
 display:flex;align-items:center;justify-content:center;
 box-sizing:border-box;min-width:0;min-height:clamp(32px,4.4dvh,44px);
 padding:4px;border:0;border-radius:8px;
 background:var(--gl-colour);color:#262A34;
 font-size:clamp(9px,.88vw,12px);font-weight:750;line-height:1.15;
 overflow-wrap:anywhere;text-align:center;
}
.page-grouplet .gl-guess-outcome{
 font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;
}
.page-grouplet .gl-guess-success{color:#3C9169;}
.page-grouplet .gl-guess-failed{color:var(--muted);}
.page-grouplet .gl-recap-categories{display:flex;flex-direction:column;gap:6px;width:100%;align-items:stretch;}
.page-grouplet .gl-recap-categories-heading{font-size:13px;margin-bottom:4px;}
.page-grouplet .gl-recap-solved-row{
 width:100%;min-height:52px;border:0;
 border-radius:10px;padding:8px 9px;animation:none;
}
.page-grouplet .gl-recap-solved-row strong{font-size:12px;}
.page-grouplet .gl-recap-solved-row small{font-size:11px;}
.page-grouplet .gl-recap-summary{
 margin:0;text-align:center;color:var(--muted);font-size:12px;
}
/* The result panel must be wide enough for the full board and all four blocks. */
body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-result-overview{
 width:100%;max-width:min(100%,700px);
}
body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-results{
 max-width:min(100%,780px);width:100%;
}
/* Only Grouplet opts into a larger board than the shared 340px square. */
body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-play:not([hidden]),
body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-intro{
 width:100%;max-width:100%;
}
body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-stage-preview{
 width:min(100%,760px);max-width:760px;min-width:0;max-height:100%;
}
body.float-ui .app-shell:not(.admin-mode) .page-grouplet .gl-stage,
body.float-ui .app-shell:not(.admin-mode) .page-grouplet .gl-preview{
 width:min(100%,760px);max-width:760px;
}
@keyframes gl-float{from{opacity:0;transform:translate(-50%,10px)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-80px)}}
@keyframes gl-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes gl-confetti{0%{opacity:0;transform:translateY(0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translateY(280px) rotate(650deg)}}
/* Admin preview remains compact, independently of game board size. */
.gl-admin-grid{
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;
 max-width:440px;margin:12px 0;
}
.gl-admin-grid .gl-tile{
 height:auto;min-height:38px;background:var(--surface-soft)!important;
 border-radius:7px;padding:9px 2px;text-align:center;font-size:11px;
 font-weight:700;overflow-wrap:anywhere;
}
.gl-admin-groups{display:grid;gap:6px;margin-top:12px;}
.gl-admin-groups .gl-recap-row{
 border-left:5px solid;padding:7px 11px;background:var(--surface-soft);
 border-radius:6px;font-size:12px;
}
.gl-admin-groups .gl-recap-row strong,
.gl-admin-groups .gl-recap-row span,
.gl-admin-groups .gl-recap-row small{display:block;}
@media(max-width:700px){
 .page-grouplet{
  --gl-cell-height:clamp(45px,min(7.8dvh,15.3vw),75px);
  --gl-tile-gap:clamp(4px,.9vw,7px);
 }
 .page-grouplet .gl-stage{gap:clamp(6px,1.25dvh,10px);}
 .page-grouplet .gl-tile{font-size:clamp(10px,2.9vw,13px);padding:3px;border-radius:9px;}
 .page-grouplet .gl-solved-row{border-radius:9px;gap:3px;padding:5px;}
 .page-grouplet .gl-solved-row strong{font-size:clamp(11px,3vw,14px);}
 .page-grouplet .gl-solved-row small{font-size:clamp(9px,2.65vw,12px);}
 .page-grouplet .gl-confidence{gap:4px;}
 .page-grouplet .gl-conf-choice{gap:3px;font-size:11px;padding:7px 3px;}
 .page-grouplet .gl-conf-points{font-size:10px;}
 .page-grouplet .gl-actions{gap:5px;}
 .page-grouplet .gl-actions button{min-height:39px;padding:7px 5px;}
 .page-grouplet .gl-guess-row{grid-template-columns:15px minmax(0,1fr) 38px;gap:4px;}
 .page-grouplet .gl-guess-blocks{gap:3px;}
 .page-grouplet .gl-guess-block{border-radius:6px;padding:3px;font-size:clamp(8px,2.2vw,10px);}
 body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-stage-preview{width:100%;}
 body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-results{padding-inline:5px;}
}
@media(max-width:700px) and (max-height:620px){
 .page-grouplet{--gl-cell-height:clamp(36px,6.3dvh,48px);--gl-tile-gap:4px;}
 .page-grouplet .gl-stage{gap:4px;}
 .page-grouplet .gl-confidence{gap:2px;}
 .page-grouplet .gl-conf-choice{padding:5px 2px;}
}
@media(prefers-reduced-motion:reduce){
 .page-grouplet .gl-tile,.page-grouplet .gl-life-dot,
 .page-grouplet .gl-float,.page-grouplet .gl-confetti{transition:none!important;animation:none!important;}
}


/* Grouplet v3: mobile viewport is a real five-region layout: lives at the
   top, board in the flexible middle, actions at the bottom. Its splash uses
   the very same responsive tile dimensions as the active game. */
.page-grouplet .gl-board-stack{
 box-sizing:border-box;display:flex;flex-direction:column;
 align-items:stretch;justify-content:center;
 width:100%;min-width:0;gap:var(--gl-tile-gap);
}
.page-grouplet .gl-solved:empty{display:none}
.page-grouplet .gl-float{
 opacity:0;animation-fill-mode:both;
}
@media(max-width:700px){
 .page-grouplet{
  --gl-cell-height:clamp(52px,min(23.2vw,11.5dvh),136px);
  --gl-tile-gap:clamp(4px,1.1vw,8px);
 }
 body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-play:not([hidden]){
  align-items:stretch;justify-content:stretch;min-height:0;height:100%;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-grouplet .gl-stage{
  box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  align-content:stretch;justify-content:stretch;
  width:100%;height:100%;min-height:0;max-height:100%;
  gap:clamp(6px,1dvh,12px);
 }
 .page-grouplet .gl-play-status{grid-row:1;align-self:start;}
 .page-grouplet .gl-board-stack{
  grid-row:2;align-self:center;
  gap:var(--gl-tile-gap);
 }
 .page-grouplet .gl-status{grid-row:3;min-height:16px;}
 .page-grouplet .gl-confidence{grid-row:4;}
 .page-grouplet .gl-actions{grid-row:5;align-self:end;}
 /* Enlarged splash, same tile geometry and almost-square proportions.
    The standard shared intro button lane is still reserved below it. */
 body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-intro
  .float-board-content>.tg-game-stage-preview{
  box-sizing:border-box;width:100%;max-width:760px;min-width:0;
  display:flex;align-items:center;justify-content:center;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-grouplet .tg-game-intro
  .gl-preview{
  box-sizing:border-box;width:100%;max-width:760px;
  grid-template-rows:repeat(4,var(--gl-cell-height));
 }
 .page-grouplet .gl-tile{font-size:clamp(11px,3vw,15px);}
 .page-grouplet .gl-life-dot{width:13px;height:13px;}
 .page-grouplet .gl-conf-choice{min-height:38px;}
 .page-grouplet .gl-actions button{min-height:43px;}
}
@media(max-width:700px) and (max-height:620px){
 .page-grouplet{
  --gl-cell-height:clamp(38px,min(21vw,9.1dvh),62px);
  --gl-tile-gap:4px;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-grouplet .gl-stage{
  gap:4px;
 }
 .page-grouplet .gl-conf-choice{min-height:32px;}
 .page-grouplet .gl-actions button{min-height:38px;}
}

/* Points move in viewport coordinates. In particular, the mobile game
   container must never crop +250 or a confidence bonus. */
.gl-floating-points{
 position:fixed;z-index:999999;pointer-events:none;user-select:none;
 line-height:1.1;
 font-family:inherit;font-weight:850;font-size:clamp(21px,3vw,30px);
 white-space:nowrap;opacity:0;
 transform:translate(-50%,0);
 text-shadow:0 2px 8px rgba(0,0,0,.12);
 animation:gl-float 1.32s cubic-bezier(.18,.72,.23,1) both;
}
.gl-floating-points.gl-float-good{color:#258659}
.gl-floating-points.gl-float-bad{color:#B44C58}
:root[data-theme="dark"] .gl-floating-points.gl-float-good{color:#83E4B3}
:root[data-theme="dark"] .gl-floating-points.gl-float-bad{color:#F3A0A9}
@media(prefers-reduced-motion:reduce){.gl-floating-points{animation:none;display:none}}


/* Grouplet v5: connection-style category with a natural comma-separated
   answer sentence. Equal vertical padding above the title and below words. */
.page-grouplet .gl-solved-row:not(.gl-recap-solved-row){
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 width:100%;
 min-width:0;
 min-height:var(--gl-cell-height);
 gap:clamp(4px,.6vw,7px);
 padding-block:clamp(7px,.9vw,13px);
 padding-inline:clamp(7px,1vw,13px);
}
.page-grouplet .gl-solved-row .gl-solved-title{
 display:block;
 width:100%;
 margin:0;
 text-align:center;
 text-transform:uppercase;
 color:#242834;
 font-size:clamp(12px,1.17vw,17px);
 font-weight:800;
 line-height:1.16;
}
.page-grouplet .gl-solved-words{
 display:block;
 width:100%;
 min-width:0;
 margin:0;
 color:#242834;
 text-align:center;
 font-size:clamp(12px,1.15vw,17px);
 font-weight:500;
 letter-spacing:-.025em;
 line-height:1.2;
 white-space:normal;
 overflow-wrap:normal;
}
.page-grouplet .gl-solved-word{
 display:inline-block;
 max-width:100%;
 width:auto;
 min-height:0;
 padding:0;
 margin:0;
 color:inherit;
 text-align:center;
 font-size:inherit;
 font-weight:500;
 line-height:inherit;
 white-space:nowrap;
 vertical-align:baseline;
}
.page-grouplet .gl-solved-separator{
 display:inline;
 font-size:inherit;
 font-weight:500;
 color:inherit;
 white-space:pre;
}
@media(max-width:700px){
 .page-grouplet .gl-solved-row:not(.gl-recap-solved-row){
  gap:clamp(3px,.75dvh,6px);
  padding-block:clamp(7px,1.2dvh,12px);
  padding-inline:6px;
 }
 .page-grouplet .gl-solved-row .gl-solved-title{
  font-size:clamp(11px,3vw,14px);
 }
 .page-grouplet .gl-solved-words{
  font-size:clamp(11px,3vw,15px);
  line-height:1.2;
 }
}

/* The results recap uses the same uppercase connection naming. */
.page-grouplet .gl-recap-solved-row strong{text-transform:uppercase;}

/* Two-stage solve: the next solved row initially behaves as four full-size
   blocks. The surrounding unsolved tile grid slides down using FLIP.
   After the short hold it becomes the normal comma-separated answer strip. */
.page-grouplet .gl-solved-row.gl-solving{
 display:block;
 min-height:var(--gl-cell-height);
 height:var(--gl-cell-height);
 width:100%;
 padding:0;
 margin:0;
 border:0;
 background:transparent;
 overflow:visible;
}
.page-grouplet .gl-solving .gl-solved-title{display:none;}
.page-grouplet .gl-solving .gl-solved-words{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:var(--gl-tile-gap);
 width:100%;
 height:var(--gl-cell-height);
 min-width:0;
}
.page-grouplet .gl-solving .gl-solved-word{
 display:flex;
 align-items:center;
 justify-content:center;
 width:100%;
 height:var(--gl-cell-height);
 min-width:0;
 padding:3px;
 border:0;
 border-radius:clamp(9px,1.15vw,16px);
 box-sizing:border-box;
 background:var(--gl-colour);
 color:#242834;
 font-size:inherit;
 font-weight:750;
 line-height:1.16;
 white-space:nowrap;
}
.page-grouplet .gl-solving .gl-solved-separator{display:none;}
@media(max-width:700px){
 .page-grouplet .gl-solving .gl-solved-word{
  border-radius:9px;padding:2px;
 }
}

/* Feedback must remain readable without making an incorrect guess feel fatal. */
.page-grouplet .gl-tile.gl-wrong{animation:gl-wrong-long .64s cubic-bezier(.36,.05,.17,1)}
@keyframes gl-wrong-long{
 0%,100%{transform:translateX(0)}
 16%,52%,84%{transform:translateX(-5px)}
 34%,68%{transform:translateX(5px)}
}
.page-grouplet .gl-near-cue{
 position:absolute;z-index:15;left:50%;top:43%;
 transform:translate(-50%,-50%);pointer-events:none;
 padding:13px 24px;border-radius:14px;background:color-mix(in srgb,var(--surface) 94%,transparent);
 color:var(--text);border:1px solid var(--line);box-shadow:0 13px 39px #0002;
 font-size:clamp(16px,2.3vw,24px);font-weight:850;letter-spacing:.07em;white-space:nowrap
}
.page-grouplet .gl-near-cue[hidden]{display:none!important}
.page-grouplet .gl-near-cue.is-showing{
 animation:gl-near-pop 1.9s ease-out both
}
@keyframes gl-near-pop{
 0%{opacity:0;transform:translate(-50%,-43%) scale(.88)}
 14%,56%{opacity:1;transform:translate(-50%,-50%) scale(1)}
 100%{opacity:0;transform:translate(-50%,-54%) scale(1.015)}
}
/* A restrained, four-part finale when the final solved category locks in. */
.page-grouplet .gl-finished .gl-solved-row{
 animation:gl-finale-wave .75s cubic-bezier(.2,.78,.3,1) both
}
.page-grouplet .gl-finished .gl-solved-row:nth-child(2){animation-delay:.12s}
.page-grouplet .gl-finished .gl-solved-row:nth-child(3){animation-delay:.24s}
.page-grouplet .gl-finished .gl-solved-row:nth-child(4){animation-delay:.36s}
@keyframes gl-finale-wave{
 0%{filter:brightness(1);transform:scale(1)}
 40%{filter:brightness(1.12);transform:scale(1.025)}
 100%{filter:brightness(1);transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
 .page-grouplet .gl-near-cue.is-showing,.page-grouplet .gl-finished .gl-solved-row{
  animation:none!important
 }
}

/* Grouplet Daily Archive: condensed 4×4 word board in the shared Plus modal. */
.page-grouplet .tg-game-intro .tg-game-actions>.sw-archive-button{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 auto!important;flex-wrap:nowrap!important;
 min-width:max-content!important;white-space:nowrap!important;
 width:max-content!important;gap:8px!important;padding-inline:14px!important
}
.page-grouplet .tg-game-intro .tg-game-actions>.sw-archive-button .sw-archive-plus{
 display:inline-grid;place-items:center;flex:0 0 17px;width:17px;height:17px;margin:0
}
.gl-archive-modal .gl-archive-board{height:170px;min-height:170px}
.gl-archive-modal .gl-archive-preview{
 width:min(100%,320px);height:auto;max-height:164px;
 gap:4px;pointer-events:none
}
.gl-archive-modal .gl-archive-preview>.gl-tile{
 box-sizing:border-box;min-width:0;min-height:0;height:36px;
 padding:2px 3px;font-size:clamp(7px,1vw,10px);line-height:1.1;
 border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.page-grouplet .sw-archive-result{
 margin:13px auto;text-align:center;max-width:520px;
 font-size:13px;line-height:1.5;color:var(--text)
}
@media(max-width:520px){
 .gl-archive-modal .gl-archive-board{height:130px;min-height:130px}
 .gl-archive-modal .gl-archive-preview{width:min(100%,258px);max-height:128px;gap:3px}
 .gl-archive-modal .gl-archive-preview>.gl-tile{height:28px;font-size:8px;border-radius:5px}
}

/* Larger, legible mobile tiles without disturbing the 4×4 grid geometry. */
@media(max-width:700px){
 .page-grouplet .gl-tile{font-size:clamp(13px,3.6vw,18px);font-weight:730;
  letter-spacing:-.01em;line-height:1.15;overflow-wrap:anywhere}
 .page-grouplet .gl-solved-words{font-size:clamp(12px,3.25vw,16px)}
}
@media(max-width:380px){
 .page-grouplet .gl-tile{font-size:clamp(12px,3.6vw,15px);padding-inline:2px}
}

/* Grouplet typography must not scale down with the window. Long or two-line
   entries wrap inside their cells rather than shrinking their lettering. */
.page-grouplet :is(.gl-stage,.gl-preview) .gl-tile{
 font-size:17px!important;line-height:1.14;white-space:normal;
 overflow-wrap:anywhere;word-break:normal
}
.page-grouplet .gl-solved-row:not(.gl-recap-solved-row) .gl-solved-title{
 font-size:17px!important
}
.page-grouplet .gl-solved-row:not(.gl-recap-solved-row) .gl-solved-words{
 font-size:13px!important
}
/* All four submitted tiles visibly hold for 600ms before either outcome.
   The initial selection is unchanged; this is the anticipatory emphasis. */
.page-grouplet .gl-tile.gl-submitting{
 background:var(--gl-selected-fill)!important;color:var(--gl-selected-ink)!important;
 box-shadow:inset 0 0 0 3px var(--gl-focus),0 0 0 3px
  color-mix(in srgb,var(--gl-focus) 24%,transparent)!important;
 animation:gl-submit-hold 600ms ease-in-out both!important;
 transform:translateY(-2px)
}
@keyframes gl-submit-hold{
 0%,100%{filter:brightness(1)}
 45%{filter:brightness(1.15)}
}
@media(prefers-reduced-motion:reduce){
 .page-grouplet .gl-tile.gl-submitting{animation:none!important}
}

/* One word must never wrap inside a Grouplet tile. Text is measured and
   reduced only when necessary; multi-word clues retain their natural wraps. */
.page-grouplet .gl-tile.gl-single-word,
.page-grouplet .gl-solved-word.gl-single-word{
 white-space:nowrap!important;word-break:keep-all!important;
 overflow-wrap:normal!important;hyphens:none;min-width:0;
}
.page-grouplet .gl-tile.gl-multi-word{
 white-space:normal;overflow-wrap:normal;word-break:normal;
}
.page-grouplet .gl-tile.gl-single-word{overflow:hidden}
.page-grouplet .gl-solved-word.gl-single-word{max-width:100%}
.page-grouplet .gl-solved-words{
 font-size:clamp(11px,.96vw,14px);
}
/* Unconfirmed tiles begin full-sized; solved words settle into a smaller
   single-row answer beneath the category without an instantaneous font swap. */
.page-grouplet .gl-solving .gl-solved-word{
 font-size:clamp(12px,1.15vw,17px);
}
@media(max-width:700px){
 .page-grouplet .gl-solved-words{font-size:clamp(10px,2.7vw,12.5px)}
 .page-grouplet .gl-solving .gl-solved-word{font-size:clamp(13px,3.6vw,18px)}
}