/* Gilgamesh, keeper of the Treasury (2026-10-07). He bursts out of a golden gate in the corner, heckles, and leaves. */
.gil{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:30;width:min(600px,calc(100vw - 28px));height:min(470px,calc(100svh - 28px));pointer-events:none;color:#f6e9c6}
.gil-stage{position:absolute;inset:0}
.gil-body{position:absolute;right:3%;bottom:96px;height:min(390px,68svh);aspect-ratio:2/3;z-index:2;opacity:0}
.gil-portrait{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 0 18px #f6c75a6b) drop-shadow(0 18px 22px #000c)}
/* The gate: three turning rings of a golden circle. */
.gil-gate{position:absolute;right:calc(3% - 20px);bottom:118px;width:300px;height:300px;z-index:1;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff3c255 0 12%,#f2c25a2e 30%,#d99b2a14 52%,transparent 68%)}
.gil-gate i{position:absolute;inset:6%;border-radius:50%;border:2px dashed #f6d27fb0;box-shadow:0 0 18px #f2c25a77,inset 0 0 18px #f2c25a44;animation:gil-turn 9s linear infinite}
.gil-gate i:nth-child(2){inset:18%;border-style:solid;border-color:#ffe6a2c4;animation-duration:6s;animation-direction:reverse}
.gil-gate i:nth-child(3){inset:31%;border-width:3px;border-style:dotted;border-color:#fff1c4d0;animation-duration:4s}
/* Smaller portals around him, like a vault opening in the air. */
.gil-portals{position:absolute;right:0;bottom:110px;width:100%;height:350px;z-index:1}
.gil-portals i{position:absolute;width:62px;height:40px;border-radius:50%;opacity:0;background:radial-gradient(ellipse,#fff7d6 0 10%,#f4c95c 28%,#b77b1f66 50%,transparent 70%);box-shadow:0 0 16px #f6cf6a99;transform:scale(0)}
.gil-portals i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #ffe2958c;animation:gil-ripple 1.8s ease-out infinite}
/* Kept close around him, clear of the student's own card. */
.gil-portals i:nth-child(1){right:30%;top:4%}.gil-portals i:nth-child(2){right:2%;top:8%;width:52px;height:34px}.gil-portals i:nth-child(3){right:33%;top:34%;width:44px;height:28px}
.gil-portals i:nth-child(4){right:15%;top:-6%;width:40px;height:26px}.gil-portals i:nth-child(5){right:-2%;top:44%;width:40px;height:26px}.gil-portals i:nth-child(6){right:26%;top:-14%;width:34px;height:22px}
/* A burst of coins from the heart of the gate. */
.gil-coins{position:absolute;right:calc(3% + 130px);bottom:268px;width:0;height:0;z-index:4}
.gil-coins i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 32%,#fffbe0,#f6cd5a 42%,#b57b1d 78%);box-shadow:0 0 8px #ffd96f,inset 0 -2px 0 #8a5a12aa}
.gil-flash{position:absolute;right:calc(3% - 70px);bottom:68px;width:400px;height:400px;z-index:3;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,#fffef0 0 6%,#ffe7a0aa 22%,#f2c25a44 42%,transparent 66%)}
/* The dialogue box. */
.gil-box{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:auto;padding:14px 20px;border-radius:18px;border:1px solid #e6c46f;background:linear-gradient(170deg,#1d262cf7,#0b1014fa 70%);box-shadow:0 20px 60px #000c,0 0 0 4px #0b1014cc,0 0 40px #f0c55a2e;opacity:0;transform:translateY(24px)}
.gil-box::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,#ffe7a0,#d7a43c,#ffe7a0,transparent)}
.gil-plate{margin:0 38px 4px 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.gil-plate b{font:800 13px/1.4 system-ui,sans-serif;letter-spacing:.32em;color:#f3cf6d;text-shadow:0 0 12px #f3cf6d66}
.gil-plate span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b9ab86}
.gil-close{position:absolute;top:9px;right:10px;width:34px;height:34px;padding:0;border-radius:50%;background:transparent;border:1px solid #e6c46f55;color:#e6c46f;font-size:19px;line-height:1}
.gil-close:hover{background:#e6c46f1a}
.gil-line{min-height:3.1em;margin:4px 0 12px;font:600 19px/1.45 Georgia,'Times New Roman',serif;color:#fbf0d2;cursor:pointer}
.gil-line.typing::after{content:"▍";margin-left:2px;color:#f3cf6d;animation:gil-caret .8s steps(1) infinite}
.gil-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gil-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.gil-actions .gold{width:auto;min-height:44px;padding:10px 20px;font-size:15px;box-shadow:0 0 18px #f0c55a55}
.gil-actions .quiet{font-size:14px;color:#cdbf9b}
.gil[data-mode="parting"] .gil-actions,.gil[data-mode="parting"] .gil-close{visibility:hidden}

/* Entrance: the gate spins open, portals pop, coins burst, a flash, and he rises with a bounce. */
.gil[data-state="in"] .gil-gate{opacity:.95;animation:gil-gate-open .75s cubic-bezier(.2,.9,.25,1.2) both}
.gil[data-state="in"] .gil-flash{animation:gil-flash .9s .12s ease-out both}
.gil[data-state="in"] .gil-portals i{opacity:.9;transform:none;animation:gil-portal .55s cubic-bezier(.2,.9,.3,1.4) both}
.gil[data-state="in"] .gil-portals i:nth-child(2){animation-delay:.12s}.gil[data-state="in"] .gil-portals i:nth-child(3){animation-delay:.2s}.gil[data-state="in"] .gil-portals i:nth-child(4){animation-delay:.28s}.gil[data-state="in"] .gil-portals i:nth-child(5){animation-delay:.36s}.gil[data-state="in"] .gil-portals i:nth-child(6){animation-delay:.44s}
.gil[data-state="in"] .gil-coins i{animation:gil-coin 1.15s cubic-bezier(.15,.75,.3,1) calc(.2s + var(--delay,0ms)) both}
.gil[data-state="in"] .gil-body{opacity:1;animation:gil-rise .95s .22s cubic-bezier(.2,.9,.25,1) both,gil-bob 3.4s 1.3s ease-in-out infinite}
.gil[data-state="in"] .gil-box{opacity:1;transform:none;transition:opacity .4s .38s,transform .5s .38s cubic-bezier(.2,.9,.25,1.15)}
/* Every new face arrives with a little gold flash and its own move. */
.gil-portrait.gil-react{animation:gil-swap .45s ease-out both}
.gil[data-face="laugh"] .gil-portrait.gil-react{animation:gil-swap .45s ease-out both,gil-laugh .9s ease-in-out}
.gil[data-face="offended"] .gil-portrait.gil-react{animation:gil-swap .45s ease-out both,gil-stomp .7s ease-out}
.gil[data-face="beckoning"] .gil-portrait.gil-react{animation:gil-swap .45s ease-out both,gil-sway 2.6s .45s ease-in-out infinite}
.gil[data-face="irritated"] .gil-portrait.gil-react{animation:gil-swap .45s ease-out both,gil-huff .6s ease-out 2}
.gil[data-face="dismissive"] .gil-portrait.gil-react{animation:gil-swap .45s ease-out both,gil-lean .8s ease-out forwards}
.gil[data-face="offended"] .gil-gate i{border-color:#ff9f7ac4;box-shadow:0 0 22px #ff7b4f88,inset 0 0 18px #ff7b4f55}
/* Exit: he sinks back into the light and the gate snaps shut. */
.gil[data-state="out"] .gil-body{opacity:1;animation:gil-sink .6s ease-in forwards}
.gil[data-state="out"] .gil-gate{opacity:.95;animation:gil-gate-close .6s .1s ease-in forwards}
.gil[data-state="out"] .gil-portals i{opacity:.9;transform:none;animation:gil-portal-out .35s ease-in forwards}
.gil[data-state="out"] .gil-box{opacity:0;transform:translateY(18px);transition:opacity .3s,transform .35s ease-in}

@keyframes gil-turn{to{transform:rotate(360deg)}}
@keyframes gil-ripple{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes gil-gate-open{0%{transform:scale(.1) rotate(-120deg);opacity:0}60%{transform:scale(1.12) rotate(10deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:.95}}
@keyframes gil-gate-close{to{transform:scale(0) rotate(140deg);opacity:0}}
@keyframes gil-flash{0%{opacity:0;transform:scale(.3)}22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
@keyframes gil-portal{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:.9}}
@keyframes gil-portal-out{to{transform:scale(0);opacity:0}}
@keyframes gil-coin{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0}12%{opacity:1}75%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 60px)) scale(1) rotate(var(--spin));opacity:0}}
@keyframes gil-rise{0%{transform:translateY(80px) scale(.84);opacity:0;filter:brightness(3) saturate(0)}55%{transform:translateY(-12px) scale(1.03);opacity:1;filter:brightness(1.5) saturate(.6)}78%{transform:translateY(4px) scale(.99);filter:none}100%{transform:none}}
@keyframes gil-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gil-sink{to{transform:translateY(70px) scale(.88);opacity:0;filter:brightness(2.6) saturate(0)}}
@keyframes gil-swap{0%{filter:brightness(2.2) saturate(.4) drop-shadow(0 0 26px #ffe39a)}100%{filter:drop-shadow(0 0 18px #f6c75a6b) drop-shadow(0 18px 22px #000c)}}
@keyframes gil-laugh{0%,100%{transform:none}12%{transform:rotate(-2.4deg) translateY(-6px)}26%{transform:rotate(2deg) translateY(2px)}40%{transform:rotate(-1.8deg) translateY(-4px)}55%{transform:rotate(1.4deg)}70%{transform:rotate(-.8deg) translateY(-2px)}85%{transform:rotate(.4deg)}}
@keyframes gil-stomp{0%{transform:none}18%{transform:scale(1.08) translateY(-8px)}34%{transform:scale(.98) translateX(-8px)}48%{transform:translateX(8px)}62%{transform:translateX(-5px)}78%{transform:translateX(3px)}100%{transform:none}}
@keyframes gil-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-1.8deg) translateX(-4px)}}
@keyframes gil-huff{0%,100%{transform:none}35%{transform:translateY(-4px) rotate(1.2deg)}65%{transform:translateY(1px) rotate(-.4deg)}}
@keyframes gil-lean{to{transform:translateX(8px) rotate(1.6deg)}}
@keyframes gil-caret{50%{opacity:0}}

/* The Treasury's banner: the King presides over his store. */
.gil-banner{grid-column:1/-1;position:relative;min-height:150px;display:flex;align-items:center;padding:18px 220px 18px 22px;border:1px solid #dec17a66;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 86% 38%,#f2c65a40,transparent 55%),linear-gradient(140deg,#1a262c,#0c151a);animation:gil-banner-in .55s cubic-bezier(.2,.8,.2,1) both}
.gil-banner img{position:absolute;right:16px;bottom:-104px;height:244px;filter:drop-shadow(0 0 14px #f6c75a5c);animation:gil-banner-rise .8s .1s cubic-bezier(.2,.9,.25,1.12) both}
.gil-banner-line{margin:6px 0 0;font:600 18px/1.45 Georgia,'Times New Roman',serif;color:#fbf0d2}
@keyframes gil-banner-in{from{opacity:0;transform:translateY(10px)}}
@keyframes gil-banner-rise{from{opacity:0;transform:translateY(46px)}}

@media (max-width:620px){
 .gil{height:min(410px,calc(100svh - 20px))}
 .gil-body{height:min(300px,56svh);bottom:118px}
 .gil-gate{width:230px;height:230px;bottom:150px}
 .gil-coins{right:calc(3% + 100px);bottom:268px}
 .gil-line{font-size:17px}
 .gil-banner{padding-right:140px}.gil-banner img{height:200px;bottom:-80px;right:0}
}
@media (prefers-reduced-motion:reduce){
 .gil *,.gil-banner,.gil-banner img{animation:none!important;transition:none!important}
 .gil-coins,.gil-flash{display:none}
}