.hud {
  --ink:#101012;
  --ink-raised:#202024;
  --cream:#eee6df;
  --muted:#b1aaad;
  --gold:#b49364;
  --red:#782735;
  position:fixed;inset:clamp(88px,12vh,118px) clamp(26px,5vw,80px) 35px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(225px,295px);
  grid-template-rows:auto minmax(0,1fr) auto;gap:16px 20px;
  pointer-events:none;color:var(--cream);
  font-family:"Chakra Petch","Noto Sans Thai",sans-serif;
}
.hud,.hud *,.hud *::before,.hud *::after {box-sizing:border-box}
.lane {min-width:0}
.lane-banner {grid-column:1/-1;grid-row:1;display:grid;justify-items:center}
.lane-toast {grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:8px}
.lane-item {grid-column:2;grid-row:3;align-self:end}
.lane-objective {grid-column:1;grid-row:3;align-self:end;width:min(100%,345px)}

.notification {
  --accent:var(--gold);
  position:relative;min-width:0;overflow-wrap:anywhere;
  animation:var(--notice-motion,reveal .2s) cubic-bezier(.2,.73,.2,1) both;
}
.notification[data-tone=error] {--accent:var(--cream);--status-rule:var(--red)}
.notification[data-tone=inform] {--accent:var(--cream)}
.notification.is-leaving {animation:leave .22s ease-in both}
.notice-copy {min-width:0}
.notice-meta {display:block;color:var(--accent);font-size:12px;font-weight:600;line-height:1.35}
.notice-title {display:block;margin-top:2px;font-size:16px;line-height:1.33}
.notice-message {margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.4}
.toast-card,.item-card,.objective-card {display:flex;align-items:center;gap:11px}

.toast-card {
  --notice-motion:toast-arrive .28s;
  isolation:isolate;
  padding:8px 16px 10px 46px;
  min-height:60px;
}
.toast-card::before {
  content:"";position:absolute;z-index:-1;inset:0 0 0 17px;
  border-radius:14px 30px 30px 14px;
  border:1px solid #ffffff25;
  background:linear-gradient(105deg,var(--ink-raised),var(--ink) 68%);
}
.toast-card[data-tone=error]::before {
  border-color:var(--red);
  background:linear-gradient(105deg,#241519,var(--ink) 68%);
}
.notice-icon {
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:35px;height:35px;
  background:var(--ink);border:1px solid var(--status-rule,var(--accent));border-radius:50%;
  box-shadow:0 0 0 3px var(--ink),inset 0 0 0 3px var(--ink-raised);
  color:var(--accent);font:700 16px/1 "Noto Sans Thai",sans-serif;
}
.toast-card::after {
  content:"";position:absolute;inset:auto 25px 4px 47px;height:1px;background:var(--status-rule,var(--accent));
  opacity:.75;transform-origin:left;animation:toast-timer var(--notice-duration) linear both;
}

.item-card {
  --notice-motion:item-arrive .34s;
  padding:8px 10px;
  background:linear-gradient(110deg,var(--ink-raised),var(--ink) 75%);
  border:1px solid #b4936488;border-radius:3px;
  box-shadow:inset 0 0 0 3px var(--ink),0 5px 15px #0006;
}
.item-image {
  flex:0 0 45px;width:45px;height:45px;object-fit:contain;padding:3px;
  background:radial-gradient(#b4936430,var(--ink-raised));border:1px solid #b4936455;
  animation:item-settle .34s ease-out both;
}
.item-quantity {
  flex:none;max-width:35%;margin-inline-start:auto;color:var(--accent);
  font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;
}

.objective-card {
  --notice-motion:objective-arrive .34s;
  padding:10px 28px 11px 14px;border-block:1px solid #b4936466;
  background:linear-gradient(100deg,var(--ink-raised),var(--ink) 82%,#101012b3);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);
}
.objective-mark {flex:none;font-size:22px;line-height:1;color:var(--accent)}
.objective-card .notice-copy {text-shadow:0 1px 4px #000}

.banner-card {
  --notice-motion:banner-enter .58s;
  width:min(100%,575px);
  padding:12px clamp(13px,3vw,28px) 14px;text-align:center;overflow:hidden;
  background:linear-gradient(90deg,transparent,#202024fa 15%,var(--ink) 50%,#202024fa 85%,transparent);
  text-shadow:0 1px 4px #000,0 1px 9px #000;
}
.banner-card[data-tone=error] {
  background:linear-gradient(90deg,transparent,#241519 19%,var(--ink) 50%,#241519 81%,transparent);
}
.banner-card::before,.banner-card::after {
  content:"";position:absolute;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--status-rule,var(--accent)),transparent);
  animation:banner-rule .58s ease-out both;
}
.banner-card::before {top:0}
.banner-card::after {bottom:0;opacity:.55}
.banner-card .notice-meta {font-size:12px;letter-spacing:.06em}
.banner-card .notice-title {font-size:clamp(22px,3vw,32px);line-height:1.2}
.banner-card .notice-message {font-size:13px}

@keyframes reveal {from {opacity:0}}
@keyframes banner-enter {
  from {opacity:0;transform:translateY(-8px);clip-path:inset(0 40%)}
  to {opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes banner-rule {from {transform:scaleX(.1)}}
@keyframes leave {to {opacity:0;transform:translateY(4px)}}
@keyframes toast-arrive {from {opacity:0;transform:translateX(9px)}}
@keyframes item-arrive {from {opacity:0;transform:translateY(10px)}}
@keyframes item-settle {from {opacity:.25;transform:scale(.85)}}
@keyframes objective-arrive {from {opacity:0;transform:translateX(-8px)}}
@keyframes toast-timer {to {transform:scaleX(0)}}

@media (max-width:680px) {
  .hud {inset:76px 20px 20px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px}
  .lane-banner,.lane-toast,.lane-item,.lane-objective {grid-column:1}
  .lane-toast,.lane-item {width:min(100%,260px);justify-self:end}
  .lane-objective {grid-row:4;width:100%}
}
@media (prefers-reduced-motion:reduce) {
  .notification,.notification.is-leaving,.item-image,.toast-card::after,.banner-card::before,.banner-card::after {animation:none}
}