.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:6px 18px 6px 12px;
  background:linear-gradient(105deg,var(--ink-raised),var(--ink) 52%);
  border-block:1px solid #b4936466;
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
.item-image {
  flex:0 0 43px;width:43px;height:43px;object-fit:contain;padding:3px;
  background:var(--ink);border:1px solid #b4936455;border-radius:5px;
  animation:item-settle .34s ease-out both;
}
.item-quantity {
  flex:none;max-width:35%;margin-inline-start:auto;padding:1px 0 1px 10px;
  border-inline-start:1px dashed #b4936477;color:var(--accent);
  font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;
}

.objective-card {
  --notice-motion:objective-arrive .34s;
  align-items:flex-start;padding:8px 20px 10px 10px;
  background:linear-gradient(90deg,var(--ink) 77%,transparent);
}
.objective-card::before,.objective-card::after {
  content:"";position:absolute;left:16px;width:1px;background:var(--red);
}
.objective-card::before {top:0;height:7px}
.objective-card::after {top:27px;bottom:0}
.objective-mark {flex:0 0 13px;font-size:16px;line-height:1;color:var(--accent);margin-top:2px}
.objective-card .notice-meta {color:var(--gold)}
.objective-card .notice-copy {text-shadow:0 1px 3px #000,0 1px 6px #000}

.banner-card {
  --notice-motion:reveal .22s;
  width:max-content;max-width:min(100%,570px);
  padding:11px clamp(24px,4vw,52px) 13px;text-align:center;
  background:var(--ink);
  clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,20px 100%,0 50%);
}
.banner-card::before,.banner-card::after {
  content:"";position:absolute;inset-inline:20px;height:1px;
  background:linear-gradient(90deg,transparent,var(--status-rule,var(--accent)),transparent);
}
.banner-card::before {top:0}
.banner-card::after {bottom:0}
.banner-card .notice-meta {font-size:12px}
.banner-card .notice-title {font-size:clamp(22px,2.2vw,32px);line-height:1.27}
.banner-card .notice-message {font-size:13px}

@keyframes reveal {from {opacity:0}}
@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 {animation:none}
}