.cloud-story{min-height:650px}
.cloud-office-backdrop{position:absolute;width:min(84vw,calc(100dvh - 80px),1000px);right:1%;top:8%;z-index:1}
.cloud-office-backdrop .clay-card{background:transparent;border:0;box-shadow:none;padding:0}
.cloud-office-backdrop .clay-heading,.cloud-office-backdrop .office-foot,.cloud-office-backdrop .slot-number{display:none}
.cloud-office-backdrop .clay-stage{background:transparent}
.cloud-office-backdrop .clay-object,.cloud-office-backdrop .decor-slot{cursor:pointer}
.cloud-welcome{position:absolute;z-index:2;left:5%;top:27%;width:min(370px,36vw);padding:25px;background:#fff9e8db;border:1px solid #fff8e9;border-radius:20px;box-shadow:0 12px 35px #5d442b22}
.cloud-welcome small,.cloud-client-card small{letter-spacing:.14em;color:#77795b;font:700 10px system-ui,sans-serif}
.cloud-welcome h1{font-size:clamp(29px,3.8vw,52px);line-height:1.08;margin:15px 0}
.cloud-welcome p{font-size:14px;line-height:1.5;margin:15px 0}
.cloud-client-call{position:absolute;z-index:2;left:5%;right:5%;bottom:88px;max-height:40vh}
.cloud-client-card{display:flex;align-items:center;gap:20px;width:min(730px,90vw);padding:15px 20px;background:#fffaf0f0;border:1px solid white;border-radius:20px;box-shadow:0 12px 40px #58422635}
.cloud-client-card .game-client-portrait{width:155px;min-width:155px;margin:0}
.cloud-client-card canvas{max-width:100%;height:auto}
.cloud-client-card h2{margin:10px 0;font-size:22px}
.cloud-client-card p{font-size:16px;line-height:1.4;max-height:85px;overflow:auto}
.cloud-story .story-dock{z-index:4;max-width:98vw}
.cloud-story .story-dock button[aria-current=page]{background:#dce8d8;border-radius:10px}
.cloud-panel{width:min(1100px,96vw);max-width:1100px!important;max-height:88dvh;overflow:auto;padding:clamp(20px,3vw,34px)}
.cloud-panel .card{box-shadow:none}
.cloud-panel .assignment-layout{display:block}
.cloud-panel .assignment-layout>aside{display:none}
.cloud-panel .story-worksheet .card{background:transparent;border:0;padding:0}
.cloud-panel #cloud-case-form{margin-top:24px}
.cloud-panel .shop-preview .clay-card{max-width:620px;margin:auto}
.cloud-panel .shop-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cloud-panel .shop-item{min-width:0}
.cloud-panel .cloud-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.cloud-panel .cloud-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.student-activity{max-width:850px;margin:0 auto}
.student-activity>p{line-height:1.55}
.activity-month-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0 12px}
.activity-month-controls h3{margin:0;flex:1;min-width:150px;text-align:center}
.activity-month-controls button{min-height:42px}
.activity-legend,.activity-help{font-size:13px;color:#58645a}
.activity-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}
.activity-totals>div{display:flex;flex-direction:column;padding:14px;background:#f0eddf;border:1px solid #ddd9c7;border-radius:12px;text-align:center}
.activity-totals strong{font-size:26px;color:#345248}
.activity-totals span{font-size:12px;margin-top:4px}
.activity-calendar-week,.activity-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.activity-calendar-week{font-size:12px;text-align:center;margin-bottom:8px;font-weight:700;color:#59664f}
.activity-calendar-day{min-width:0;min-height:90px;display:flex;flex-direction:column;gap:5px;padding:9px;border:1px solid #e3dece;background:#fffdf7;border-radius:10px;font-size:12px;color:#556258}
.activity-calendar-day time{font-weight:700;font-size:16px;color:#294a43}
.activity-calendar-day.has-activity{background:#e4eddf;border-color:#a8b89c}
.activity-calendar-day.is-today{outline:2px solid #997245;outline-offset:-2px}
.activity-status,.activity-empty{padding:16px;background:#f1ecdf;border-radius:10px}
.activity-status.error{color:#97322c}
.activity-help{margin:20px 0 0;border-top:1px solid #e0d7c5;padding-top:14px}
@media(max-width:520px){
  .activity-month-controls{gap:7px}.activity-month-controls h3{font-size:18px;min-width:130px}
  .activity-totals{gap:6px}.activity-totals>div{padding:10px 4px}.activity-totals strong{font-size:23px}
  .activity-calendar-week,.activity-calendar-grid{gap:3px}.activity-calendar-week{font-size:10px}
  .activity-calendar-day{min-height:72px;border-radius:6px;padding:6px 3px;font-size:10px;gap:4px}
  .activity-calendar-day time{font-size:14px}
}
.cloud-panel .cloud-result-face{width:170px;float:right}
.cloud-panel .cloud-result-face .game-client-portrait{max-width:100%}
.cloud-teacher-note{background:#e6f0e8;padding:12px;border-radius:10px;margin-top:12px}
.cloud-notice{position:fixed;top:75px;left:50%;transform:translateX(-50%);z-index:1000;max-width:min(88vw,600px);padding:0;color:#1f5d3b;font:600 14px system-ui,sans-serif;pointer-events:none}
.cloud-notice:not(:empty){padding:12px 20px;background:#f4faef;border:1px solid #b3cbb1;border-radius:10px;box-shadow:0 9px 25px #233b2840}
.cloud-notice.bad{color:#97322c;background:#fff0ec;border-color:#dba9a1}
.cloud-panel .case-decision-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:25px;padding-top:15px;border-top:1px solid #e6d7bd;font-size:13px}
.cloud-panel .refuse-case,.cloud-panel .refuse-case:hover,.cloud-panel .refuse-case:focus{color:#fff;background:#a54037;border-color:#8b342d}
.office-visit-room{max-width:760px;margin:0 auto}
.office-visit-room .clay-stage{background:transparent}
.office-visit-room .clay-object,.office-visit-room .decor-slot{pointer-events:none;cursor:default}
.office-visit-room .empty-slot{visibility:hidden}
.office-visit-room .clay-object{display:block}
.office-visit-room .slot-number{display:none}
.cloud-panel .story-tutorial{min-height:300px}
.cloud-panel .story-tutorial p{font-size:19px;line-height:1.6;margin:35px 0}
.cloud-panel button:focus-visible,.cloud-story button:focus-visible{outline:3px solid #a7693a;outline-offset:2px}
.cloud-story .story-hud{z-index:5}
.login-wrap .login-card{background:#fffaf0}
.login-wrap .scene{background:linear-gradient(110deg,#224c47e8,#405a4bc0),url('/assets/clay/atlas-shell.png') center/cover}
.shell>.topbar{height:auto;min-height:64px;flex-wrap:wrap}
.shell>.topbar>div{min-width:0;max-width:100%;flex-wrap:wrap}
.shell>.topbar .note,.shell>.topbar .eyebrow{color:#c4d7d0}
@media(max-width:520px){.shell>.topbar>div{width:100%;justify-content:space-between}.shell>.topbar strong{white-space:nowrap}}
@media(max-width:800px){
  .cloud-story{min-height:800px}
  .cloud-office-backdrop{width:min(96vw,calc(max(800px,100dvh) - 470px));right:50%;top:110px;transform:translateX(50%)}
  .cloud-welcome{left:4%;top:auto;bottom:123px;width:min(410px,90vw);padding:17px}
  .cloud-welcome h1{font-size:27px;margin:8px 0}
  .cloud-welcome p{font-size:12px;margin:9px 0}
  .cloud-client-call{left:4%;right:4%;bottom:128px;max-height:36vh}
  .cloud-client-card{padding:10px;gap:10px;max-height:32vh;overflow:auto}
  .cloud-client-card .game-client-portrait{width:100px;min-width:100px}
  .cloud-client-card h2{font-size:17px}
  .cloud-client-card p{font-size:13px}
  .cloud-story .story-dock{display:grid;grid-template-columns:repeat(5,1fr);width:97%;bottom:4px;padding:3px}
  .cloud-story .story-dock button{width:auto;font-size:10px;padding:7px 2px;white-space:normal}
  .cloud-story .story-hud{padding:12px}
  .cloud-story .story-hud #hud{position:absolute;top:61px;left:10px;right:10px;max-width:none;font-size:11px;padding:6px 12px}
  .cloud-panel{max-height:94dvh;padding:22px 14px}
  .cloud-panel .cloud-result-face{float:none;margin:auto}
}
.agency-entrance .city-view{position:absolute;inset:16px;overflow:hidden;border-radius:20px;container-type:size;background:#ddc8a1}
.city-panorama{position:absolute;left:0;top:50%;transform:translateY(-50%);width:max(100cqw,243.84cqh);aspect-ratio:1958/803}
.city-panorama img{display:block;width:100%;height:100%}
.city-billboard{position:absolute;left:calc(100% * 75 / 1958);top:calc(100% * 90 / 803);width:calc(100% * 430 / 1958);pointer-events:none;-webkit-tap-highlight-color:transparent}
.city-billboard svg{display:block;width:100%;overflow:visible}
.billboard-hit{fill:transparent;pointer-events:fill;cursor:pointer}
.billboard-light{opacity:0;filter:brightness(1.22) saturate(1.10) drop-shadow(0 0 5px #ffcf79);transition:opacity 160ms ease-out}
.city-billboard:is(:hover,:focus-visible,:active) .billboard-light{opacity:1}
.billboard-focus{fill:none;stroke:#fff0c4;stroke-width:3;opacity:0}
.city-billboard:focus-visible{outline:none}
.city-billboard:focus-visible .billboard-focus{opacity:1}
@media(prefers-reduced-motion:reduce){.billboard-light{transition:none}}
@media(forced-colors:active){.billboard-focus{stroke:Highlight}}
@media(max-width:900px),(max-aspect-ratio:6/5){
  .agency-entrance.demo-login{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:12px}
  .agency-entrance .city-view{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.98;border-radius:14px}
  .agency-entrance .demo-login-caption{display:none}
  .agency-entrance .demo-login-card{width:min(100%,480px);max-height:none;margin:0}
}

/* The executive reception uses the same form controls as the agency entrance. */
.executive-entrance {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 100svh;
  padding: clamp(24px, 4vw, 76px);
  background: #223934;
  color: #fff5df;
}
.executive-arrival {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left 82%;
  z-index: -1;
}
.executive-reception {
  width: clamp(300px, 28vw, 420px);
  padding: clamp(24px, 3vw, 44px);
  background: #173833fa;
  border: 1px solid #bda373;
  border-radius: 12px;
  box-shadow: 0 12px 44px #18211c66;
  font: 15px/1.5 system-ui, sans-serif;
}
.executive-unit { margin: 0 0 12px; color: #e6c994; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.executive-reception h1 { margin: 0; font: 500 clamp(32px, 3vw, 48px)/1.04 Georgia, serif; color: #fff4dc; }
.executive-instruction { margin: 14px 0 24px; color: #e2e4d7; }
.executive-reception label { color: #f5eedf; font-weight: 600; }
.executive-reception input { color: #283832; background: #fff9ef; border-color: #b4ac97; }
.executive-reception .error { color: #ffcfbe; min-height: 0; margin: 8px 0; }
.executive-reception .primary { width: 100%; margin: 12px 0 18px; padding: 12px; background: #ecd3a2; border-color: #cfab72; color: #23342c; font-weight: 700; }
.executive-reception .primary:hover { background: #f8e5c4; }
.executive-return { color: #f1dcba; text-underline-offset: 4px; }
.executive-reception :focus-visible { outline: 3px solid #fff0bb; outline-offset: 3px; }
@media (max-width: 800px), (max-aspect-ratio: 6/5) {
  .executive-entrance { display: block; padding: 0 0 24px; }
  .executive-arrival { display: block; position: static; width: 100%; height: auto; aspect-ratio: 1.65; object-position: left center; }
  .executive-reception { width: min(100%, 500px); margin: 0 auto; border: 0; border-top: 2px solid #c6ab79; border-radius: 0; box-shadow: none; }
}