:root{ --bg:#0b0c10; --ink:#111; --hud:#12141a; --hudText:#e8e8e8; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; font-family:Palanquin,system-ui,sans-serif; background:var(--bg); color:var(--hudText); }
.tg-hud{
  display:flex; gap:1.25rem; align-items:center; justify-content:center;
  background:var(--hud); padding:.6rem 1rem; border-bottom:1px solid #222;
}
.tg-hud > div{ min-width:8ch; text-align:center; }
.tg-back{ margin-right:auto; color:#9cc3ff; text-decoration:none; }
.tg-back:hover{ text-decoration:underline; }

.tg-main{ position:relative; display:grid; place-items:center; height:calc(100% - 110px); }
#tg-canvas{ width:min(1100px, 95vw); height:min(70vh, 700px); border:2px solid #000; background:#fff; }

.tg-typed{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-size:1.1rem; background:rgba(0,0,0,.06); color:#111; padding:.35rem .6rem; border-radius:8px;
}

.tg-tip{ text-align:center; padding:.5rem 1rem; background:#0f1116; border-top:1px solid #222; }

/* Show hero name on the black header, right side */
.tg-hud { position: relative; } /* so absolute child anchors inside */
.tg-hero-name-hud{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: 600;
  pointer-events: none;
}

.tg-hidden { display: none; }

.tg-main { position: relative; } /* ensure absolute children anchor to this area */

.tg-shortcut{
  position: absolute;
  right: 12px;
  top: 12px;
  background: #042fb1;
  color: #fff;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 10px 12px;
  max-width: 260px;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

.tg-shortcut-title{
  font-weight: 700; margin-bottom: 6px;
}

.tg-shortcut-body{
  font-size: 0.95rem; line-height: 1.35;
}

.tg-shortcut kbd{
  background: #222; border-radius: 6px; padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.tg-hidden { display: none; }

/* Copied! toast */
.tg-copied{
  position:absolute;
  left:50%; top:38%;
  transform: translate(-50%,-50%) rotate(-8deg);
  background: linear-gradient(180deg, #fff, #f7f7f7);
  color:#111;
  font-weight:900;
  font-size: 40px;
  line-height:1;
  padding:.35em .6em;
  border-radius:14px;
  border:2px solid #111;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  text-shadow: 1px 1px 0 #fff;
  pointer-events:none;
  opacity:0;
}

/* kick animation with class toggle */
.tg-copied--anim{
  animation: tgCopiedPop .65s ease-out forwards;
}

@keyframes tgCopiedPop{
  0%   { transform: translate(-50%,-50%) rotate(-8deg) scale(.8); opacity:0; }
  15%  { transform: translate(-50%,-50%) rotate(-8deg) scale(1.08); opacity:1; }
  60%  { transform: translate(-50%,-68%) rotate(-6deg) scale(1.03); opacity:.95; }
  100% { transform: translate(-50%,-86%) rotate(-4deg) scale(1.0);  opacity:0; }
}

/* optional: tiny screen flash ring for extra juice */
.tg-copied::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:18px;
  border:3px solid rgba(255,210,0,.9);
  filter: drop-shadow(0 0 10px rgba(255,210,0,.6));
  opacity:0;
  animation: tgCopiedRing .65s ease-out forwards;
}
@keyframes tgCopiedRing{
  0%   { transform: scale(.7); opacity:0; }
  30%  { transform: scale(1.05); opacity:.9; }
  100% { transform: scale(1.25); opacity:0; }
}

/* HUD small link for fallback download */
#tg-vocab-download{
    margin-left: 8px;
    color: #9cc3ff;
    text-decoration: none;
  }
  #tg-vocab-download:hover{ text-decoration: underline; }

  /* Saved! toast */
.tg-saved{
    position:absolute;
    left:50%; top:48%;
    transform: translate(-50%,-50%) rotate(6deg);
    background: linear-gradient(180deg, #eaffea, #d8ffd8);
    color:#0b4f0b;
    font-weight:900;
    font-size: 36px;
    line-height:1;
    padding:.35em .6em;
    border-radius:14px;
    border:2px solid #0b4f0b;
    box-shadow: 0 8px 22px rgba(0,0,0,.2);
    pointer-events:none;
    opacity:0;
  }
  .tg-saved--anim{
    animation: tgSavedPop .65s ease-out forwards;
  }
  @keyframes tgSavedPop{
    0%   { transform: translate(-50%,-50%) rotate(6deg) scale(.85); opacity:0; }
    15%  { transform: translate(-50%,-50%) rotate(6deg) scale(1.08); opacity:1; }
    60%  { transform: translate(-50%,-68%) rotate(4deg) scale(1.03); opacity:.95; }
    100% { transform: translate(-50%,-86%) rotate(2deg) scale(1.0);  opacity:0; }
  }

  /* find input inside the side panel */
.tg-find-input{
    margin-top: 8px;
    width: 260px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #2a2a2a;
    background: #0f1117;
    color: #fff;
    font: 600 16px ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  }
  .tg-find-input:focus{ outline: 2px solid #4f7cff; }

  /* “N found” toast (canvas-style badge) */
  .tg-found{
    position:absolute;
    left:50%; top:46%;
    transform: translate(-50%,-50%) rotate(-4deg);
    background: #fff;
    color:#0b4f0b;
    font-weight:900;
    font-size: 32px;
    line-height:1;
    padding:.35em .6em;
    border-radius:14px;
    border:2px solid #0b4f0b;
    box-shadow: 0 8px 22px rgba(0,0,0,.2);
    pointer-events:none;
    opacity:0;
  }
  .tg-found--anim{ animation: tgFoundPop .65s ease-out forwards; }
  @keyframes tgFoundPop{
    0%   { transform: translate(-50%,-50%) rotate(-6deg) scale(.88); opacity:0; }
    15%  { transform: translate(-50%,-50%) rotate(-5deg) scale(1.08); opacity:1; }
    60%  { transform: translate(-50%,-68%) rotate(-4deg) scale(1.03); opacity:.95; }
    100% { transform: translate(-50%,-86%) rotate(-3deg) scale(1.0);  opacity:0; }
  }

  /* Shortcuts dialog */
#tg-help { border: none; padding: 0; background: transparent; }
#tg-help::backdrop { background: rgba(0,0,0,.45); }

.tg-help__card{
  width: min(560px, 92vw);
  background: #12141a;
  color: #fff;
  border: 1px solid #222;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 36px rgba(0,0,0,.35);
}
.tg-help__list{ margin: 8px 0 14px 20px; line-height: 1.6; }
.tg-help__list .muted{ opacity: .7; font-style: italic; }
.tg-help__btn{
  background: #4f7cff; color:#fff; border:none; padding:10px 14px;
  border-radius:10px; cursor:pointer;
}
.tg-help__btn:hover{ filter:brightness(1.1); }