/* CATTILES 0930 · Daily Sort visual port.
 * Source: Cattiles_0930_jester_fix.zip / css/cattiles.css
 * Ported from original .board, .bucket, .slot, .tile, .floating-stack,
 * .selected, .complete-solid, .completion-runner and grid completion wave.
 * Scope all styles to Tegazumi's shared game page; keep the parent chrome.
 */
/* Theme-aware Cattiles well/slot colours for splash and live board. */
.page-cattiles{
 --ct-stack-bg:#343434;--ct-stack-hover:#3f3f3f;
 --ct-stack-border:#494949;--ct-stack-hover-border:#656565;
 --ct-slot-bg:#545454;--ct-complete-border:#4c4c4c;
 --ct-destination-border:#8b8b8b;
 --ct-well-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 7px 18px rgba(33,42,56,.11);
}
:root[data-theme="dark"] .page-cattiles{
 --ct-stack-bg:#22232b;--ct-stack-hover:#26262a;
 --ct-stack-border:#353535;--ct-stack-hover-border:#5a5a5a;
 --ct-slot-bg:#191919;--ct-complete-border:#303030;
 --ct-destination-border:#777774;
 --ct-well-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 7px 18px rgba(0,0,0,.16);
}
/* The splash uses the identical 12-stack board geometry as play, at the
 * same responsive size. No icon placeholder or mini illustration. */
.page-cattiles .ct-preview{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:9px;width:100%;max-width:100%;min-width:0;padding:3px 0;text-align:center
}
.page-cattiles .ct-preview .ct-board{
 flex:none;max-width:650px;margin-inline:auto;
}
.page-cattiles .ct-preview .ct-stack{cursor:default;pointer-events:none}
.page-cattiles .ct-preview-copy{
 max-width:470px;margin:0;color:var(--muted);font-size:13px;line-height:1.45
}
.page-cattiles .tg-game-play{min-width:0;width:100%;height:100%;flex:1 1 0}
.page-cattiles .ct-stage{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:100%;min-width:0;min-height:0;height:100%;gap:clamp(7px,1.2vh,15px);padding:5px 0 10px}
.page-cattiles .ct-status{display:flex;justify-content:center;max-width:100%;align-items:center}
.page-cattiles .ct-metrics{display:flex;justify-content:center;align-items:center;gap:clamp(22px,4vw,52px)}
.page-cattiles .ct-metric{display:flex;align-items:baseline;justify-content:center;gap:9px;font-variant-numeric:tabular-nums}
.page-cattiles .ct-metric small{font-size:12px;font-weight:650;color:var(--muted)}
.page-cattiles .ct-metric strong{font-size:22px;letter-spacing:-.045em;font-weight:800;color:var(--text)}
/* Cattiles 0930 uses 3x4; the shared portal displays 4x3 desktop and 3x4
 * mobile. The same viewport-bound stack-height applies to both splash and
 * gameplay, keeping the Daily button accessible without reducing preview
 * artwork relative to the playable board. */
.page-cattiles .ct-board{--ct-stack-width:clamp(61px,9vw,107px);--ct-stack-height:clamp(85px,calc((100dvh - 410px)/3),144px);--ct-tile-gap:4px;--ct-bucket-padding:6px;--ct-tile-radius:8px;
 display:grid;grid-template-columns:repeat(4,var(--ct-stack-width));grid-template-rows:repeat(3,var(--ct-stack-height));
 gap:clamp(9px,1.75vw,15px);align-content:center;justify-content:center;min-width:0;width:100%;max-width:650px;flex:1 1 auto;min-height:0;overflow:visible;isolation:isolate;padding:10px 6px}
/* User-tuned 5px inset on light-mode stacks. The dark-mode stacks retain
   their established 6px inset; the completion overlay shares this token. */
.page-cattiles .ct-board{--ct-bucket-padding:5px}
:root[data-theme="dark"] .page-cattiles .ct-board{--ct-bucket-padding:6px}
/* Original Cattiles 0930 bucket: a solid charcoal well with a slim outline,
 * precisely inset flat tiles and a delicate inset/exterior shadow. */
.page-cattiles .ct-stack{position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;border-radius:13px;
 border:1px solid var(--ct-stack-border);background:var(--ct-stack-bg);padding:var(--ct-bucket-padding);display:flex;flex-direction:column;
 gap:var(--ct-tile-gap);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none;
 box-shadow:var(--ct-well-shadow);
 transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}
@media(hover:hover) and (pointer:fine){.page-cattiles .ct-stack:hover:not(.ct-complete){background:var(--ct-stack-hover);border-color:var(--ct-stack-hover-border)}}
.page-cattiles .ct-stack:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.page-cattiles .ct-stack.ct-selected{border-color:var(--ct-selected-colour,#777772);box-shadow:0 0 0 4px color-mix(in srgb,var(--ct-selected-colour,#777772) 78%,transparent),0 0 10px color-mix(in srgb,var(--ct-selected-colour,#777772) 24%,transparent),0 10px 22px rgba(0,0,0,.26);z-index:6}
.page-cattiles .ct-stack.ct-destination{border-color:var(--ct-destination-border);box-shadow:0 0 0 2px rgba(255,255,255,.09),0 9px 22px rgba(0,0,0,.2)}
.page-cattiles .ct-stack.ct-shake{animation:ct-0930-shake .26s ease}
/* The original .slot has a dark inset and is stacked top-to-bottom in DOM;
 * the four tiles are always bottom-to-top in logical board state. */
.page-cattiles .ct-well{width:100%;height:100%;display:flex;flex-direction:column-reverse;gap:var(--ct-tile-gap);min-height:0;align-items:stretch}
.page-cattiles .ct-slot{flex:1 1 0;min-height:0;min-width:0;border-radius:var(--ct-tile-radius);background:var(--ct-slot-bg);position:relative;overflow:visible}
.page-cattiles .ct-tile{position:relative;width:100%;height:100%;box-sizing:border-box;display:block;overflow:hidden;border-radius:var(--ct-tile-radius);
 background:var(--ct-colour);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.16)}
/* Original selectionGlow + shineSweep; only the exposed movable run shimmers. */
.page-cattiles .ct-selected .ct-slot.ct-selected-run{z-index:5}
.page-cattiles .ct-selected .ct-selected-run .ct-tile{z-index:3;isolation:isolate;animation:ct-0930-selectedGlow 900ms ease-in-out infinite;overflow:hidden}
.page-cattiles .ct-tile::after,.ct-0930-floating-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:linear-gradient(110deg,transparent 0%,transparent 34%,rgba(255,255,255,0) 40%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.12) 54%,rgba(255,255,255,0) 61%,transparent 67%,transparent 100%);
 transform:translateX(-140%);opacity:0}
.page-cattiles .ct-selected .ct-selected-run .ct-tile::after{animation:ct-0930-shineSweep 1050ms ease-in-out infinite;opacity:1}
/* Original completed stack merges into one seamless block of colour. */
.page-cattiles .ct-stack.ct-complete{gap:0;pointer-events:none;border-color:var(--ct-complete-border);cursor:default}
.page-cattiles .ct-complete .ct-well{gap:0}
.page-cattiles .ct-complete .ct-slot{border:0;border-radius:0;margin:0;overflow:visible;background:transparent;transition:flex-basis 100ms ease,margin 100ms ease}
.page-cattiles .ct-complete .ct-tile{border:0;border-radius:0;box-shadow:none;transition:border-radius 100ms ease,filter 180ms ease}
.page-cattiles .ct-complete .ct-slot:first-child .ct-tile{border-radius:0 0 var(--ct-tile-radius) var(--ct-tile-radius)}
.page-cattiles .ct-complete .ct-slot:last-child .ct-tile{border-radius:var(--ct-tile-radius) var(--ct-tile-radius) 0 0}
.page-cattiles .ct-complete::after{content:"";position:absolute;inset:var(--ct-bucket-padding);border-radius:var(--ct-tile-radius);background:var(--ct-complete-colour,transparent);pointer-events:none;z-index:2}
.page-cattiles .ct-new-complete::after{animation:ct-0930-solidPulse .68s cubic-bezier(.16,.9,.22,1)}
/* Source .floating-stack: screen-pixel coordinate carrier which keeps the
 * measured tile gap and all selected tiles in one rigid translating group. */
.ct-0930-floating-stack{position:fixed;z-index:10012;pointer-events:none;display:flex;flex-direction:column;will-change:transform,left,top;gap:var(--ct-flight-gap,4px);transform:translateY(-7px) scale(1.015)}
.ct-0930-floating-tile{position:relative;flex:0 0 auto;display:block;box-sizing:border-box;overflow:hidden;border-radius:var(--ct-flight-radius,8px);background:var(--ct-colour);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.18),0 8px 20px rgba(0,0,0,.32)}
.page-cattiles .ct-incoming{visibility:hidden}
.ct-0930-completion-runner{position:fixed;pointer-events:none;z-index:10014;border-radius:13px;border:2px solid var(--ct-runner-colour,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--ct-runner-colour) 18%,transparent),0 0 18px 3px color-mix(in srgb,var(--ct-runner-colour) 38%,transparent);animation:ct-0930-runnerPresence 1380ms ease-out both,ct-0930-runnerBorderPulse 530ms ease-in-out 2}
.ct-0930-grid-wave{position:fixed;z-index:10013;pointer-events:none;border-radius:13px;border:2px solid rgba(255,255,255,.48);background:radial-gradient(circle,rgba(255,255,255,.09),transparent 72%);box-shadow:0 0 18px rgba(255,255,255,.13);opacity:0;animation:ct-0930-gridWave .34s cubic-bezier(.16,.78,.22,1) var(--ct-wave-delay,0ms) forwards}
.page-cattiles .ct-winning .ct-complete{animation:ct-0930-solvedPulse .34s ease-out var(--ct-wave-delay,0ms) both}
/* Shared preview/play board sizing on small screens. Reuse board columns,
 * stack dimensions, padding and spacing in every mode. */
.page-cattiles .tg-game-stage-preview[data-game-preview="full"]{width:100%}
.page-cattiles .ct-preview-board{pointer-events:none;user-select:none}
.page-cattiles .ct-instruction{width:min(100%,530px);margin:0 auto;min-height:30px;display:grid;place-items:center;color:var(--muted);font-size:12px;text-align:center;line-height:1.4}
.page-cattiles .ct-actions{display:flex;gap:9px;align-items:center;justify-content:center}
.page-cattiles .ct-actions button{min-width:100px;font-size:12px;padding:9px 12px}
.page-cattiles .ct-error{margin:8px 0;color:#b94a48;font-size:13px;text-align:center}
.page-cattiles .ct-end-details{display:grid;justify-items:center;gap:12px;margin:10px 0 0}
.page-cattiles .ct-end-metrics{display:flex;justify-content:center;align-items:center;gap:clamp(15px,3vw,28px);flex-wrap:wrap}
.page-cattiles .ct-end-metric{display:grid;gap:4px;min-width:68px;text-align:center}
.page-cattiles .ct-end-metric small{font-size:10px;color:var(--muted)}
.page-cattiles .ct-end-metric strong{font-size:14px;font-weight:780;color:var(--text)}
@keyframes ct-0930-selectedGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.18),0 0 0 2px #141414,0 0 7px 4px rgba(255,255,255,.20)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.16),0 0 0 2px #141414,0 0 13px 5px rgba(255,255,255,.38)}}
@keyframes ct-0930-shineSweep{0%{transform:translateX(-140%);opacity:0}18%{opacity:.58}52%{opacity:.58}70%,100%{transform:translateX(140%);opacity:0}}
@keyframes ct-0930-solidPulse{0%{filter:brightness(1);box-shadow:0 0 0 rgba(255,255,255,0)}22%{filter:brightness(1.22);box-shadow:0 0 0 1px rgba(255,255,255,.45),0 0 14px 4px rgba(255,255,255,.20)}52%{filter:brightness(1.08);box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 14px 4px rgba(255,255,255,.16)}100%{filter:brightness(1);box-shadow:0 0 0 rgba(255,255,255,0)}}
@keyframes ct-0930-runnerPresence{0%{opacity:0}10%{opacity:1}78%{opacity:1}100%{opacity:0}}
@keyframes ct-0930-runnerBorderPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.32)}}
@keyframes ct-0930-gridWave{0%{opacity:0;transform:scale(.86)}28%{opacity:.92;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
@keyframes ct-0930-solvedPulse{0%,100%{filter:brightness(1)}48%{filter:brightness(1.22)}}
@keyframes ct-0930-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}60%{transform:translateX(4px)}}
@media(max-width:700px){.page-cattiles .ct-board{--ct-stack-width:clamp(70px,26vw,107px);--ct-stack-height:clamp(61px,calc((100dvh - 480px)/4),112px);--ct-tile-gap:3px;grid-template-columns:repeat(3,var(--ct-stack-width));grid-template-rows:repeat(4,var(--ct-stack-height));gap:clamp(7px,2vw,12px);padding:5px 3px}.page-cattiles .ct-stage{gap:5px;padding:1px 0}.page-cattiles .ct-metric strong{font-size:19px}.page-cattiles .ct-instruction{min-height:24px;font-size:11px}.page-cattiles .ct-actions button{padding:8px 10px;min-width:91px}}
@media(max-height:680px){.page-cattiles .ct-board{--ct-stack-height:clamp(72px,calc((100dvh - 430px)/3),98px)}.page-cattiles .ct-stage{gap:3px}.page-cattiles .ct-instruction{min-height:21px}}
@media(max-width:700px) and (max-height:680px){.page-cattiles .ct-board{--ct-stack-height:clamp(53px,calc((100dvh - 455px)/4),76px)}}
@media(prefers-reduced-motion:reduce){.page-cattiles .ct-selected-run .ct-tile,.page-cattiles .ct-new-complete::after,.ct-0930-completion-runner,.ct-0930-grid-wave,.page-cattiles .ct-winning .ct-complete{animation:none!important}}
/* Cattiles uses the SAME Game Presentation intro / action positioning as all
 * other games. In particular: no Cattiles override of .tg-game-intro,
 * .float-board-content or .tg-game-actions. Game Presentation owns those.
 *
 * Our one responsibility here is supplying a square, centred artwork SLOT
 * (the shared --tg-game-visual-size), and keeping 12 rectangular stacks
 * wholly inside it. Board sizing never drives the size/position of the intro.
 */
/* Cattiles supplies a larger artwork size token; all position and action
 * geometry still belongs exclusively to Game Presentation. */
body.float-ui .app-shell:not(.admin-mode) #main-content>.page-cattiles:not([hidden]){
 /* Screenshot target: the 4x3 splash artwork occupies about 520x550
    within a ~560px centred slot at a short desktop viewport. This is ONLY
    the preview token; the live Cattiles board keeps its current geometry. */
 --tg-game-visual-size:min(64vw,640px,max(220px,calc(100dvh - 260px)));
}
body.float-ui .app-shell:not(.admin-mode)
 .page-cattiles .tg-game-stage-preview[data-game-preview="full"]{
 box-sizing:border-box;
 width:var(--tg-game-visual-size,var(--float-square-size));
 height:var(--tg-game-visual-size,var(--float-square-size));
 max-width:100%;max-height:100%;
 flex:0 0 auto;
 margin-inline:auto;
}
body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-preview{
 box-sizing:border-box;
 display:grid;place-items:center;
 width:100%;height:100%;min-width:0;min-height:0;
 padding:0;margin:0;
 container-type:size;
}
body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-board{
 --ct-gap:clamp(4px,1cqh,12px);
 --ct-stack-width:max(23px,min(140px,
  calc((100cqw - 52px) / 4),
  calc((100cqh - var(--ct-board-inset,85px)) / 4.38)));
 --ct-stack-height:calc(var(--ct-stack-width) * 1.46);
 --ct-tile-gap:clamp(2px,.36cqh,4px);
 box-sizing:border-box;
 display:grid;flex:none;
 grid-template-columns:repeat(4,var(--ct-stack-width));
 grid-template-rows:repeat(3,var(--ct-stack-height));
 width:max-content;height:max-content;
 max-width:100%;max-height:100%;min-width:0;min-height:0;
 gap:var(--ct-gap);padding:3px;
 align-content:center;justify-content:center;
 align-self:center;justify-self:center;
 margin:0 auto;
}
body.float-ui .app-shell:not(.admin-mode)
 .page-cattiles .ct-board>.ct-stack{
 box-sizing:border-box;
 width:var(--ct-stack-width);height:var(--ct-stack-height);
 min-width:0;min-height:0;max-height:none;
 aspect-ratio:1 / 1.46;flex:none;
}
body.float-ui .app-shell:not(.admin-mode)
 .page-cattiles .ct-preview>.ct-preview-board{
 /* Let the original rectangular stacks use the larger splash slot; keep
    tile aspect ratio and all active-game measurements untouched. */
 --ct-board-inset:36px;
 --ct-gap:clamp(8px,1.1vw,12px);
 pointer-events:none;
}
/* The active game has its own contents, but does not modify the common intro.
 * Moves stays immediately above the playable board. */
body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-stage{
 box-sizing:border-box;
 display:grid;grid-template-columns:minmax(0,1fr);
 grid-template-rows:minmax(0,1fr) auto auto;
 justify-items:center;align-items:stretch;
 width:100%;height:100%;min-width:0;min-height:0;
 gap:clamp(5px,.8vh,10px);
 padding:2px 0 4px;
}
body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-board-region{
 box-sizing:border-box;
 display:flex;flex-direction:column;
 align-items:center;justify-content:center;
 width:100%;height:100%;min-width:0;min-height:0;
 gap:clamp(5px,.7vh,9px);
 container-type:size;
}
body.float-ui .app-shell:not(.admin-mode)
 .page-cattiles .ct-board-region>.ct-status{
 flex:none;min-height:0;max-width:100%;
 align-self:center;
}
body.float-ui .app-shell:not(.admin-mode)
 .page-cattiles .ct-board-region>.ct-board{
 /* The original 170px reserve unnecessarily constrained the live board. */
 --ct-board-inset:78px;
 flex:none;align-self:center;
}
body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-stage>.ct-instruction{
 align-self:center;min-height:0;max-width:100%;
 margin:0;text-align:center;overflow-wrap:anywhere;
}
body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-stage>.ct-actions{
 align-self:end;min-height:43px;
 margin:0;padding:0;
 display:flex;align-items:center;justify-content:center;
}
@media(max-width:700px){
 body.float-ui .app-shell:not(.admin-mode) #main-content>.page-cattiles:not([hidden]){
  --tg-game-visual-size:min(93vw,540px,max(170px,calc(100dvh - 370px)));
 }
 body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-board{
  --ct-gap:clamp(4px,1.2cqw,9px);
  --ct-stack-width:max(21px,min(136px,
   calc((100cqw - 38px) / 3),
   calc((100cqh - var(--ct-board-inset,90px)) / 5.84)));
  grid-template-columns:repeat(3,var(--ct-stack-width));
  grid-template-rows:repeat(4,var(--ct-stack-height));
 }
 /* The shared mobile splash defaults to a square. Cattiles is a portrait
    3x4 game: take the available HEIGHT first, rather than constraining
    all twelve stacks to a square and shrinking them. Only splash changes. */
 body.float-ui .app-shell:not(.admin-mode)
  .page-cattiles .tg-game-intro .tg-game-stage-preview[data-game-preview="full"]{
  --ct-mobile-splash-width:min(96vw,420px,calc((100cqh - 4px) * .53));
  width:var(--ct-mobile-splash-width)!important;
  height:calc(var(--ct-mobile-splash-width) / .53)!important;
  max-width:100%!important;max-height:100%!important;
  aspect-ratio:53 / 100;
 }
 body.float-ui .app-shell:not(.admin-mode)
  .page-cattiles .ct-preview>.ct-preview-board{
  /* Match the live 3x4 grid; keep the full-size rectangular tiles and
     avoid the old 110px height reserve that made the splash tiny. */
  --ct-board-inset:30px;
  --ct-gap:clamp(4px,1.2cqw,9px);
  --ct-stack-width:max(21px,min(136px,
   calc((100cqw - 24px) / 3),
   calc((100cqh - var(--ct-board-inset)) / 5.84)));
  grid-template-columns:repeat(3,var(--ct-stack-width));
  grid-template-rows:repeat(4,var(--ct-stack-height));
 }
 body.float-ui .app-shell:not(.admin-mode)
  .page-cattiles .ct-board-region>.ct-board{
  --ct-board-inset:175px;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-stage{
  gap:4px;padding:1px 0 3px;
 }
 body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-stage>.ct-actions{
  min-height:39px;
 }
}

/* Reclaim Cattiles' 1080p playable region while retaining its fixed
   four-by-three geometry, rectangular tiles and shared footer controls. */
@media(min-width:701px) and (min-height:760px) and (max-height:1150px){
 body.float-ui .app-shell:not(.admin-mode) .page-cattiles .ct-board-region>.ct-board{
  --ct-board-inset:72px;
 }
}

/* Cattiles help examples get the same light/dark wells as the real board. */
:root[data-theme="light"] .tg-game-help-dialog .tg-help-art[data-game="cattiles"]{
 --ct-help-slot-bg:#dfe4eb;
}
:root[data-theme="light"] .tg-game-help-dialog
 .tg-help-art[data-game="cattiles"] .tg-help-stack{
 background:#eef0f4;border-color:#cbd1db;
}
:root[data-theme="dark"] .tg-game-help-dialog .tg-help-art[data-game="cattiles"]{
 --ct-help-slot-bg:#1b1e21;
}


/* Plus Cattiles archive: a small read-only rendering of the original 12
   stacks, without changing responsive live/splash geometry. */
.page-cattiles .ct-archive-modal .ct-archive-board{
 width:100%;height:170px;min-height:170px;overflow:hidden;
 display:flex;justify-content:center;align-items:center;
}
.page-cattiles .ct-archive-modal .ct-archive-preview.ct-board,
body.float-ui .page-cattiles .ct-archive-modal .ct-archive-preview.ct-board{
 --ct-stack-width:29px;--ct-stack-height:40px;--ct-tile-gap:1px;
 --ct-bucket-padding:2px;--ct-tile-radius:2px;--ct-gap:4px;
 display:grid;grid-template-columns:repeat(4,29px);grid-template-rows:repeat(3,40px);
 gap:4px;flex:none;width:132px;height:128px;max-width:100%;max-height:100%;
 padding:0;overflow:visible;margin:0;pointer-events:none;
}
.page-cattiles .ct-archive-preview.ct-board .ct-stack,
body.float-ui .page-cattiles .ct-archive-preview.ct-board>.ct-stack{
 box-sizing:border-box;width:29px;height:40px;max-height:40px;
 border-radius:5px;padding:2px;pointer-events:none;box-shadow:none;
}
.page-cattiles .ct-archive-preview .ct-well{gap:1px}
.page-cattiles .ct-archive-preview .ct-slot,
.page-cattiles .ct-archive-preview .ct-tile{border-radius:2px}
@media(max-width:520px){
 .page-cattiles .ct-archive-modal .ct-archive-board{height:130px;min-height:130px}
 .page-cattiles .ct-archive-modal .ct-archive-preview.ct-board{transform:scale(.86)}
}


/* Higher specificity than the regular full-height Cattiles board contract:
   archive thumbnails must never inherit the game's viewport-sized stacks. */
body.float-ui .app-shell:not(.admin-mode) .page-cattiles
 .ct-archive-modal .ct-archive-preview.ct-board{
 --ct-stack-width:29px;--ct-stack-height:40px;
 --ct-bucket-padding:2px;--ct-tile-gap:1px;--ct-tile-radius:2px;
 flex:none;width:132px;height:128px;max-height:128px;min-height:0;
 display:grid;grid-template-columns:repeat(4,29px);
 grid-template-rows:repeat(3,40px);gap:4px;padding:0;
 align-self:center;justify-self:center;overflow:visible;
}
body.float-ui .app-shell:not(.admin-mode) .page-cattiles
 .ct-archive-modal .ct-archive-preview.ct-board>.ct-stack{
 width:29px;height:40px;min-width:29px;min-height:40px;max-height:40px;
 aspect-ratio:auto;flex:none;padding:2px;border-radius:5px;
 pointer-events:none;
}


/* Cattiles splash: Daily Archive is a text + Plus badge ON ONE LINE.
   Shared compact game buttons can otherwise force the badge to a new row. */
.page-cattiles .tg-game-intro .tg-game-actions > .sw-archive-button,
body.float-ui .app-shell:not(.admin-mode) .page-cattiles
 .tg-game-intro .tg-game-actions > .sw-archive-button{
 display:inline-flex!important;flex-direction:row!important;
 flex-wrap:nowrap!important;align-items:center!important;
 justify-content:center!important;
 flex:0 0 auto!important;flex-shrink:0!important;
 width:max-content!important;min-width:max-content!important;
 max-width:none;box-sizing:border-box;white-space:nowrap!important;
 gap:8px!important;padding-inline:14px!important;
}
.page-cattiles .tg-game-intro .tg-game-actions > .sw-archive-button .sw-archive-plus{
 display:inline-grid;place-items:center;
 flex:0 0 17px!important;width:17px;height:17px;
 white-space:nowrap;align-self:center;margin:0;
}