/* ROOM BADGES — small, pale, always-visible labelled icon badges pinned on room objects. The
   Discovery Room gets one per AREA and each category room keeps one per app. Inactive / coming-soon
   objects never get one. Placement and size come from destinations.js (`badgeAt`) and the container
   width, so they track the painting at any size. */
.scene,.room-frame{container-type:inline-size}
.badge{
  --b:36px;                                /* fallback where container units are missing */
  --b:clamp(34px,4.8cqw,40px);             /* icon edge: ~37px on a 768px-wide iPad room */
  position:absolute;z-index:5;
  left:var(--x);top:var(--y);
  width:max-content;
  transform:translate(-50%,calc(var(--b) * -.5));
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--b) * .06);
  text-decoration:none;color:#61738b;opacity:.78;
  transition:opacity .14s ease;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  animation:badgePop .5s cubic-bezier(.3,1.5,.5,1) both;
  animation-delay:var(--d,0s);
}
/* A badge is a link over a larger transparent hotspot, so its own tap area is its whole box
   plus a little margin: the 34–40px icon remains comfortably tappable. */
.badge::before{content:"";position:absolute;inset:-5px -6px -5px -6px;border-radius:14px}
.badge-icon{
  position:relative;display:block;
  width:var(--b);height:var(--b);
  border-radius:calc(var(--b) * .26);
  background:rgba(255,255,255,.74);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 2px 7px rgba(74,91,116,.18);
  display:grid;place-items:center;overflow:hidden;
}
.badge-icon img{width:88%;height:88%;object-fit:contain;display:block;pointer-events:none;opacity:.78}
.badge-icon img.tile{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.badge-name{
  display:block;
  max-width:88px;padding:.12em .48em .17em;border-radius:999px;
  background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.84);
  box-shadow:0 1px 5px rgba(74,91,116,.16);
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;
  font-size:clamp(8px,calc(var(--b) * .23),10px);
  line-height:1.08;white-space:normal;text-align:center;
}
.badge-name:lang(th){font-family:system-ui,-apple-system,'Thonburi',sans-serif}
.badge-name:lang(th){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.badge:hover,.badge:focus-visible,.badge:active,.badge.on{opacity:1}
.badge:hover .badge-icon img,.badge:focus-visible .badge-icon img,.badge:active .badge-icon img,.badge.on .badge-icon img{opacity:1}
.badge:active .badge-icon,.badge.on .badge-icon{transform:translateY(1px) scale(.96)}
.badge:focus-visible .badge-icon{outline:4px solid #7c4dff;outline-offset:3px}
.badge:hover .badge-icon{box-shadow:0 3px 10px rgba(74,91,116,.24)}
@keyframes badgePop{from{transform:translate(-50%,calc(var(--b) * -.5)) scale(.6)}to{transform:translate(-50%,calc(var(--b) * -.5)) scale(1)}}
/* A phone-width room (about 375px wide, 280px tall) cannot hold all names without covering the
   painting: below 480px the badge is the small icon alone (its name stays in the accessible label).
   The target device is the 9.7in iPad; this keeps the phone sane, not optimised. */
@container (max-width:480px){
  .badge{--b:clamp(32px,9.5cqw,38px)}
  .badge-name{display:none}
  .badge::before{inset:-8px}
}
/* The picker dialog and any modal sit above the room; badges ride inside the (then inert) room. */
@media (prefers-reduced-motion:reduce){
  .badge{animation:none;transition:none}
  .badge:active .badge-icon,.badge.on .badge-icon{transform:none}
}