:root{--ink:#223044;--line:#26374f;--blue:#b9dfe6;--yellow:#f3d77b;--pink:#eeb0a6;--green:#c8dda6;--good:#18723a;--bad:#a92828}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:url("../site/letterbck.jpg") center/cover fixed;color:var(--ink);font-family:"Century Gothic","Segoe UI",sans-serif}.shell{width:min(1180px,calc(100% - 28px));margin:auto;padding:28px 0}.panel{min-height:calc(100vh - 56px);padding:clamp(18px,3vw,34px);border:4px solid var(--line);border-radius:9px;background:#fffdf8;box-shadow:10px 10px 0 #2030472e}h1{margin:8px 0 0;font-size:clamp(2.8rem,7vw,6rem);line-height:1;text-shadow:3px 3px #f2c94de6}p{margin:10px 0 0;font-weight:800;color:#667085}.back{display:inline-flex;padding:9px 14px;border:3px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-weight:900;text-decoration:none;box-shadow:3px 3px #20304733}.activity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:28px;padding:18px;border:4px solid var(--line);border-radius:8px;background:#fff}.activity-grid a{display:grid;place-items:center;gap:8px;min-height:164px;padding:10px;border:3px solid var(--line);border-radius:8px;color:var(--ink);background:var(--blue);box-shadow:4px 4px #20304740;text-decoration:none;text-align:center}.activity-grid a:nth-child(4n+2){background:var(--yellow)}.activity-grid a:nth-child(4n+3){background:var(--pink)}.activity-grid a:nth-child(4n){background:var(--green)}.activity-grid .activity-picture{display:grid;place-items:center;width:100%;height:112px;overflow:hidden;border:0;border-radius:8px;background:#ffffff94}.activity-grid .activity-picture img{display:block;width:100%;height:100%;padding:4px;object-fit:contain;transition:transform .18s ease}.activity-grid a:hover .activity-picture img{transform:scale(1.04)}.activity-grid span{font-size:.9rem;font-weight:900;color:#435066}.activity-header{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:start}.activity-header h1{margin:0;font-size:clamp(2rem,5vw,4.5rem)}.score{min-width:150px;padding-top:12px;font-weight:900}.track{display:block;height:22px;overflow:hidden;border:3px solid var(--line);border-radius:20px;background:#e5e7eb}.fill{display:block;height:100%;background:#42ed68;transition:.3s}.activity{display:grid;gap:20px;align-content:start;min-height:430px;margin-top:22px;padding:clamp(14px,2.5vw,28px);border:4px solid var(--line);border-radius:8px;background:#fff}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:14px}.tile,.choice,.letter{min-height:76px;padding:10px;border:3px solid var(--line);border-radius:8px;background:var(--blue);color:var(--ink);font:900 clamp(1.2rem,2.5vw,2rem) inherit;box-shadow:3px 3px #20304738;cursor:pointer}.tile:nth-child(4n+2),.choice:nth-child(4n+2),.letter:nth-child(4n+2){background:var(--yellow)}.tile:nth-child(4n+3),.choice:nth-child(4n+3),.letter:nth-child(4n+3){background:var(--pink)}.tile:nth-child(4n),.choice:nth-child(4n),.letter:nth-child(4n){background:var(--green)}button:focus-visible,a:focus-visible{outline:4px solid #1d4ed8;outline-offset:3px}.correct{background:#42ed68!important}.wrong{background:#fca5a5!important}.prompt{text-align:center;font-size:clamp(2rem,6vw,4.5rem);font-weight:900}.listen{justify-self:center;width:100px;height:100px;border:4px solid var(--line);border-radius:50%;background:var(--yellow);font-size:3rem;cursor:pointer}.order-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:86px;padding:12px;border:3px dashed #94a3b8;border-radius:8px}.chip{padding:10px;border:3px solid var(--line);border-radius:8px;background:#dcfce7;font-weight:900;cursor:pointer}.word-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.word-slots span{display:grid;place-items:center;width:clamp(42px,6vw,66px);height:72px;border-bottom:5px solid var(--line);font-size:2.5rem;font-weight:900}.letters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.letter{min-width:60px}.clock-wrap{display:grid;place-items:center}.clock{width:min(330px,70vw);height:auto}.calendar{width:min(720px,100%);margin:auto;border-collapse:collapse;table-layout:fixed;font-weight:900;text-align:center}.calendar caption{padding:12px;border:3px solid var(--line);background:var(--yellow);font-size:2rem}.calendar th,.calendar td{height:54px;border:2px solid var(--line)}.calendar th{background:var(--blue)}.calendar td.target{background:#fde68a;outline:5px solid #e11d48;outline-offset:-5px}.feedback{min-height:58px;text-align:center;font-size:2.5rem;font-weight:900}.good{color:var(--good)}.bad{color:var(--bad)}.complete{position:fixed;inset:0;display:grid;place-items:center;background:#182334b3}.complete[hidden]{display:none}.complete button{width:min(430px,80vw);height:300px;border:4px solid var(--line);border-radius:18px;background:#fff;cursor:pointer}.complete span{display:grid;place-items:center;width:190px;height:190px;margin:auto;border-radius:50%;background:#42ed68;color:#fff;font:900 9rem Arial;box-shadow:0 10px #269d49}@media(max-width:720px){.shell{width:calc(100% - 16px);padding:8px 0}.panel{padding:12px}.activity-grid{grid-template-columns:1fr}.activity-header{grid-template-columns:1fr auto}.activity-header>div:nth-child(2){grid-row:2;grid-column:1/-1}.grid{grid-template-columns:repeat(2,1fr)}.score{min-width:110px}.calendar th,.calendar td{height:42px;font-size:.8rem}}
/* Keep generated menu artwork fully visible inside its frame. */
.activity-grid .activity-picture img {
  width: calc(100% - 8px) !important;
  height: 96px !important;
  max-width: none;
  max-height: none;
  object-fit: contain !important;
}