/* THE WELCOME VIEW'S STYLES, shared by portal.html and admin.html
 * (2026-09-29). Uses the page's --line / --panel / --dim / --fg tokens and
 * falls back where a page lacks one. */
/* ---- the welcome page: the local dashboard's Home (web/src/Welcome.tsx and
 * its CSS in web/src/styles.css), ported 2026-09-29. Keep the two in step.
 * The character first: portrait, full name, class in its own colour, live
 * bars. Then the sheet as cards in the in-game sheet's groups, and the map
 * taking the right half of the page.
 *
 * THE CARDS ARE MONOCHROME LIKE THE REST, the icons and titles are not
 * (asked for, 2026-09-29). A first pass tinted every card's background,
 * border and top edge in its own colour and it no longer looked like one
 * product; the colour now lives only in each card's icon ring and title text
 * (--acc), each school's icon and name (--res), the class-colour wash behind
 * the portrait, and what carries meaning (the bars, the green "+N", the pin).
 * The cards are the dashboard's own .card: a hairline border on the panel.
 * --cls is the class colour, set on .welcome by the component. */
.welcome { --cls:#fff; display:flex; flex-direction:column; gap:1.2rem }
.whero {
  display:flex; align-items:center; gap:1.6rem; padding:1.4rem 1.6rem;
  border:1px solid var(--line); border-radius:3px;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cls) 16%, transparent) 0%, transparent 55%), var(--panel);
}
.wavatar { position:relative; flex:none; width:128px; height:128px }
.wavatar img, .wavatar-blank {
  width:128px; height:128px; border-radius:50%; object-fit:cover; display:block;
  border:3px solid color-mix(in srgb, var(--cls) 70%, #000);
  box-shadow:0 0 0 1px #000, 0 0 28px color-mix(in srgb, var(--cls) 35%, transparent);
  background:#111;
}
.wlevel {
  position:absolute; right:-2px; bottom:-2px; min-width:34px; height:34px; padding:0 .35rem;
  display:flex; align-items:center; justify-content:center; border-radius:17px;
  background:#000; border:2px solid color-mix(in srgb, var(--cls) 70%, #000);
  font-weight:900; font-size:.95rem;
}
.whero-text { flex:1; min-width:0 }
.wname { font-size:2.3rem; font-weight:900; letter-spacing:-.01em; line-height:1.05 }
.wsub { margin-top:.35rem; color:var(--dim); font-size:1rem }
.wcls { color:var(--cls); font-weight:700 }
.wspec { color:var(--dim) }
.wbars { margin-top:1rem; display:grid; gap:.45rem; max-width:34rem }
.wbar { position:relative; height:24px; border-radius:3px; background:#141414; overflow:hidden;
        border:1px solid #000; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) }
.wbar-fill { position:absolute; inset:0 auto 0 0; transition:width .45s var(--ease, cubic-bezier(.22,.61,.36,1)) }
/* the gloss on the top half of a bar */
.wbar-fill::after { content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%) }
.wbar-text { position:relative; display:flex; justify-content:space-between; align-items:center;
             height:100%; padding:0 .6rem; font-size:.8rem; font-weight:700;
             text-shadow:0 1px 2px #000 }

/* Half and half. The map column is capped by the window's HEIGHT too: its
   picture is 3:2, so a width of (100vh - 12rem) x 1.5 keeps the whole card on
   screen on a short window. */
.wbody { display:grid; gap:1.2rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start }
.wleft { display:flex; flex-direction:column; gap:1.2rem; min-width:0; container-type:inline-size }
/* Two by two, or four across when the left half is wide enough. Counted from
   the half's own width, not the window's: auto-fit left Defence alone on a
   row at 1920, and the full-width Resistances card stopped the others
   stretching on a wide screen. */
.wgrid { display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:stretch }
@container (min-width:66rem) { .wgrid { grid-template-columns:repeat(4, minmax(0,1fr)) } }
@container (max-width:30rem) { .wgrid { grid-template-columns:minmax(0,1fr) } }
.wbody > .wmap { position:sticky; top:1rem; justify-self:end; width:min(100%, calc((100vh - 12rem) * 1.5)) }
@media (max-width:1100px) { .wbody { grid-template-columns:1fr } .wbody > .wmap { position:static; justify-self:stretch; width:auto } }
@media (max-width:720px)  { .whero { flex-direction:column; text-align:center } .wbars { margin-inline:auto } }

.wcard { min-width:0; border:1px solid var(--line); border-radius:3px; background:var(--panel);
         padding:1rem 1.15rem 1.05rem }
.wwide { grid-column:1 / -1 }
.wcard-head { display:flex; align-items:center; gap:.65rem; margin-bottom:.7rem; min-width:0 }
/* the game's icon for the group, ringed in the card's colour like the portrait */
.wicon { flex:none; width:30px; height:30px; border-radius:50%; object-fit:cover; background:#111;
  border:2px solid color-mix(in srgb, var(--acc, #888) 70%, #000);
  box-shadow:0 0 0 1px #000, 0 0 12px color-mix(in srgb, var(--acc, #888) 40%, transparent) }
.wcard-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:.8rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb, var(--acc, #8a8a8a) 60%, #fff) }
.wcard-right { margin-left:auto; flex:none }
.wcoords { display:inline-block; padding:.12rem .55rem; border-radius:3px;
  font-size:.8rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--fg);
  background:#111; border:1px solid var(--line2, #2a2a2a) }

.wrow { display:flex; justify-content:space-between; align-items:baseline; gap:.8rem;
        padding:.42rem .5rem; margin:0 -.5rem; border-radius:3px; transition:background .2s }
.wrow + .wrow { border-top:1px solid var(--line) }
.wrow:hover { background:rgba(255,255,255,.025) }
.wrow-k { color:var(--dim); font-size:.9rem }
.wrow-v { font-weight:800; font-size:.95rem; font-variant-numeric:tabular-nums; white-space:nowrap }
.wrow-sub { margin-left:.4rem; color:#7ee0a0; font-size:.78rem; font-weight:700 }

/* attribute rows carry a bar: the base part in grey, the green part after it */
.wstat + .wstat { border-top:1px solid var(--line) }
.wstat .wrow { padding-bottom:.25rem }
.wstat .wrow:hover { background:none }
.wstat-bar { display:flex; height:3px; margin:0 0 .45rem; border-radius:2px; overflow:hidden; background:#151515 }
.wstat-base, .wstat-bonus { transition:width .45s var(--ease, cubic-bezier(.22,.61,.36,1)) }
.wstat-base { background:#6a6a6a }
.wstat-bonus { background:color-mix(in srgb, #7ee0a0 75%, #000) }

/* resistances: one tile per school. Tiles wrap onto a new line before a name
   can touch its neighbour. */
.wresist { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(8rem,100%),1fr)); gap:.6rem }
.wres { display:flex; align-items:center; gap:.6rem; min-width:0; padding:.5rem .65rem; border-radius:3px;
  border:1px solid var(--line); background:#0d0d0d }
.wres img { flex:none; width:28px; height:28px; border-radius:50%; object-fit:cover; background:#111;
  border:2px solid color-mix(in srgb, var(--res, #888) 70%, #000);
  box-shadow:0 0 0 1px #000, 0 0 10px color-mix(in srgb, var(--res, #888) 40%, transparent) }
.wres-txt { display:flex; flex-direction:column; min-width:0; line-height:1.15 }
.wres-n { font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:color-mix(in srgb, var(--res, #8a8a8a) 65%, #fff) }
.wres-v { font-weight:900; font-size:1.05rem; font-variant-numeric:tabular-nums }

/* the map: the picture in a plain frame, the pin in the class colour */
.wmap-frame { position:relative; width:100%; aspect-ratio:1002 / 668; border-radius:3px; overflow:hidden;
  background:#0d0d0d; border:1px solid var(--line2, #2a2a2a) }
.wmap-frame > img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block }
/* a zone change crossfades: each picture is a layer, the new one fades in once loaded */
.wmap-layer { position:absolute; inset:0; opacity:0; transition:opacity .7s ease }
.wmap-layer.on { opacity:1 }
.wmap-layer > img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; display:block }
@media (prefers-reduced-motion: reduce) { .wmap-layer { transition:none } }
.wmap-frame > .empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.wpin { position:absolute; z-index:2; width:0; height:0 }
.wpin-dot { position:absolute; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%;
            background:var(--cls); border:2px solid #fff; box-shadow:0 0 0 2px #000, 0 0 10px rgba(0,0,0,.8) }
.wpin-pulse { position:absolute; left:-20px; top:-20px; width:40px; height:40px; border-radius:50%;
              border:2px solid var(--cls); animation:wpulse 1.8s ease-out infinite }
@keyframes wpulse { from { transform:scale(.35); opacity:1 } to { transform:scale(1.4); opacity:0 } }

/* ---- talents (2026-09-30), as web/src/styles.css draws them ---------------------
   The three panels as the game's frame lays them out. A talent with points takes
   the class colour; one without is greyed, like the frame.
   SIZED FROM THE CARD'S OWN WIDTH, not the window's. A tree is four fixed
   columns, so three side by side need about 549px; the card is narrower than
   that on the two-column Home from 1101 to about 1570px and on one column from
   721 to 928px, and the trees ran over each other. Now the icons shrink first
   (26px, then 22px, three across down to 378px) and below that the trees
   stack, one per row. The breakpoints are that arithmetic: 4 x icon + 3 gaps +
   18px of tree frame, three trees and two .75rem gaps. */
.welcome [data-w="tal"] { container:wtal / inline-size }
.ttrees { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem }
.ttree { min-width:0; border:1px solid var(--line, #1c1c1c); border-radius:3px; padding:.55rem .5rem .7rem }
.ttree-h { display:flex; justify-content:space-between; align-items:baseline; gap:.4rem;
  font-size:.8rem; color:var(--dim, #8a8a8a); margin-bottom:.55rem; padding:0 .15rem }
.ttree-h > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ttree-pts { color:var(--fg, #fff); font-weight:700 }
.ttree-grid { --tn:34px; display:grid; grid-template-columns:repeat(4, var(--tn)); grid-auto-rows:var(--tn);
  gap:7px; justify-content:center }
@container wtal (width < 549px) { .ttree-grid { --tn:26px; gap:5px } }
@container wtal (width < 435px) { .ttree-grid { --tn:22px; gap:4px }
  .ttree-grid .tnode-rank { right:-4px; bottom:-4px; min-width:13px; height:13px; padding:0 2px; font-size:.55rem; line-height:11px } }
@container wtal (width < 378px) { .ttrees { grid-template-columns:minmax(0, 1fr) } .ttree-grid { --tn:34px; gap:7px }
  .ttree-grid .tnode-rank { right:-5px; bottom:-5px; min-width:16px; height:16px; padding:0 3px; font-size:.65rem; line-height:14px } }
@container wtal (width < 175px) { .ttree-grid { --tn:26px; gap:5px } }
.tnode { position:relative; border:1px solid var(--line2, #2a2a2a); border-radius:4px; cursor:default }
.tnode img, .tnode-blank { display:block; width:100%; height:100%; border-radius:3px }
.tnode img { filter:grayscale(1) brightness(.4) }
.tnode-blank { background:var(--line, #1c1c1c) }
.tnode.on { border-color:var(--cls) }
.tnode.on img { filter:none }
.tnode.max { box-shadow:0 0 0 1px var(--cls) }
.tnode-rank { position:absolute; right:-5px; bottom:-5px; min-width:16px; height:16px;
  padding:0 3px; border-radius:8px; background:#000; border:1px solid var(--cls);
  font-size:.65rem; line-height:14px; text-align:center; font-weight:700; color:#fff }
/* The hover, drawn like the game's own talent tooltip. In <body>, fixed. */
.ttip { position:fixed; z-index:1000; pointer-events:none; width:320px; padding:.55rem .7rem .65rem;
  background:rgba(8,10,24,.96); border:1px solid #3c3f55; border-radius:4px;
  box-shadow:0 6px 24px rgba(0,0,0,.6); font-size:.8rem; line-height:1.4 }
.ttip[hidden] { display:none }
.ttip-name { font-size:.95rem; font-weight:700; color:#fff }
.ttip-rank, .ttip-line, .ttip-next { color:#fff }
.ttip-pair { display:flex; justify-content:space-between; gap:1rem; color:#fff }
.ttip-desc { color:#ffd100; margin-top:.2rem; white-space:pre-line }
.ttip-next { margin-top:.45rem }