/* DEAD TIDE 156 — bespoke talent shrine + retention treasure vault.
   Visual only: skill levels, point costs, server-authoritative claims unchanged. */
#skill-training{position:relative;isolation:isolate;padding:20px 15px 23px;border:3px double #8d7e55;border-radius:5px;background:radial-gradient(ellipse at 50% 10%,rgba(110,69,152,.24),transparent 58%),repeating-linear-gradient(0deg,#0d1019 0 8px,#111520 8px 16px);box-shadow:0 0 0 3px #070910,inset 0 0 55px #03040baa,0 18px 35px #030307b8;overflow:hidden}
#skill-training::before{content:"✧  BLOODLINE CODEX  ✧";display:block;text-align:center;font:900 11px var(--font-mono);letter-spacing:.27em;color:#c9a5ff;text-shadow:0 0 10px #8757d5;margin-bottom:12px}
#skill-training::after{content:"";pointer-events:none;position:absolute;inset:5px;border:1px solid #d3b87728;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:-1}
#skill-training-head{align-items:center;border-block:1px solid #7b5e3d;padding:10px 4px}
#skill-training-head b{font:900 clamp(22px,4vw,32px) var(--font-head);color:#f7e5ba;letter-spacing:.12em;text-shadow:0 3px #40263e,0 0 20px #a86ee44a}
#skill-training-head span{font:900 10px var(--font-mono);color:#ffe19c;background:#292039;border:1px solid #8c6e9e;padding:7px}
#skill-training-note{text-align:center;color:#c4b5ba;font:800 9px/1.65 var(--font-mono);letter-spacing:.07em;padding:8px 3px 18px}
#skill-list{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px}
#skill-list::before{content:"";pointer-events:none;position:absolute;top:22%;bottom:23%;left:15%;right:15%;background:linear-gradient(90deg,transparent 0 1%,#9c7197 1% 2%,transparent 2% 49%,#9c7197 49% 51%,transparent 51% 98%,#9c7197 98% 99%,transparent 99%);opacity:.2}
#skill-list .skill-node{--skill:#d5ff67;position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:center;min-width:0;min-height:206px;padding:12px 7px 9px;border:2px solid color-mix(in srgb,var(--skill) 48%,#463e5e);border-radius:3px;background:radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--skill) 14%,transparent),transparent 47%),linear-gradient(160deg,#252033,#10121c 76%,#090c13);box-shadow:0 0 0 3px #080912,inset 0 0 0 1px #c7b6cd27,0 8px 17px #030306b3}
#skill-list .skill-node::before{content:"";position:absolute;left:50%;top:-20px;width:3px;height:18px;transform:translateX(-50%);background:linear-gradient(#403048,var(--skill));box-shadow:0 0 9px var(--skill);opacity:.7}
#skill-list .skill-node:nth-child(-n+3)::before{content:none}
#skill-list .skill-node[data-owned="true"]{border-color:var(--skill);box-shadow:0 0 0 3px #070910,inset 0 0 24px color-mix(in srgb,var(--skill) 12%,transparent),0 0 17px color-mix(in srgb,var(--skill) 20%,transparent)}
#skill-list .skill-node-head{display:flex;flex-direction:column;align-items:center;gap:6px}
#skill-list .skill-node-title{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
#skill-list .skill-node-title svg{box-sizing:content-box;width:35px;height:35px;padding:13px;stroke-width:1.9;color:var(--skill);background:radial-gradient(circle,#242338 20%,#11101c 70%);border:3px double var(--skill);transform:rotate(45deg);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--skill) 50%,transparent))}
#skill-list .skill-node-title svg *{transform-box:fill-box;transform-origin:center}
#skill-list .skill-node-title b{font:900 17px var(--font-head);color:#f1e7dc;letter-spacing:.08em;overflow-wrap:anywhere}
#skill-list .skill-node-head>span{font:900 10px var(--font-mono);color:var(--skill)}
#skill-list .skill-node small{font:800 9px/1.35 var(--font-mono);color:#bca6bc;margin:5px 0}
#skill-list .skill-node p{flex:1;font:700 10px/1.5 var(--font-mono);color:#d8d1d1;margin:0 0 8px}
#skill-list .skill-node .skill-runes{display:flex;gap:2px;justify-content:center;margin:0 0 8px}
#skill-list .skill-node .skill-runes i{display:block;width:11%;height:4px;background:#383843;border:1px solid #4c4558}
#skill-list .skill-node .skill-runes i.active{background:var(--skill);box-shadow:0 0 5px var(--skill)}
#skill-list .skill-node button{min-height:39px;margin-top:auto;border:1px solid color-mix(in srgb,var(--skill) 75%,#eee);border-radius:2px;background:linear-gradient(#27273a,#161b27);color:var(--skill);text-shadow:0 0 6px color-mix(in srgb,var(--skill) 25%,transparent);font:900 13px var(--font-head);letter-spacing:.06em}
#skill-list .skill-node button:not(:disabled):active{transform:translateY(2px)}
#skill-list .skill-node button:disabled{background:#14151c;border-color:#373744;color:#7f7e89;text-shadow:none}
#daily-login-card{position:relative;border:3px solid #ac844d!important;background:radial-gradient(ellipse at 50% 0%,#5b3042 0%,transparent 51%),linear-gradient(165deg,#272236,#10151f 65%,#0a0d13)!important;box-shadow:0 0 0 3px #080a0e,inset 0 0 45px #100918,4px 6px #05060a!important;overflow:hidden}
#daily-login-card::after{content:"";position:absolute;right:-25px;top:-29px;width:125px;height:125px;border:15px double #c89f6540;transform:rotate(34deg);pointer-events:none}
#daily-login-card .retention-heading{font-size:clamp(22px,4vw,30px)!important;color:#fff0c8!important;text-shadow:3px 3px #7c3e45,0 0 22px #e7b17a5c!important}
#daily-login-card .retention-emblem{width:46px!important;height:46px!important;border:3px solid #f8d99d;background:radial-gradient(circle,#74452b,#201827);box-shadow:0 0 20px #e3a75255,4px 4px #090a0e}
#daily-login-card .retention-emblem svg{width:35px!important;height:35px!important}
#daily-login-days{gap:5px!important;margin:15px 0 16px!important}
#daily-login-card .daily-login-day{position:relative;padding:13px 2px 9px!important;min-height:48px!important;border:2px solid #60515b;background:linear-gradient(#201e2e,#12131e);clip-path:polygon(0 0,100% 0,100% 87%,85% 100%,15% 100%,0 87%);color:#9d8f9e;font-size:14px!important}
#daily-login-card .daily-login-day b{font-size:14px!important}
#daily-login-card .daily-reward-glyph{display:grid;place-items:center;margin:6px auto 0;width:25px;height:25px;color:#f8d18a}
#daily-login-card .daily-reward-glyph svg{display:block;width:23px;height:23px;stroke:currentColor;filter:drop-shadow(0 0 5px #e5a74d55)}
#daily-login-card .daily-login-day.current .daily-reward-glyph{color:#ffedc0}
#daily-login-card .daily-login-day.collected .daily-reward-glyph{color:#b5f2dd}
#daily-login-card .daily-login-day.current{border-color:#ffe4a2;background:linear-gradient(#795035,#382c31)!important;color:#fff4c9;box-shadow:inset 0 0 16px #f1c17866,0 0 13px #d6aa5544}
#daily-login-card .daily-login-day.collected{border-color:#86b4a4;background:linear-gradient(#26443d,#142624)!important;color:#c3ffe1}
#daily-login-card #daily-login-copy{color:#e4d1bf;font-size:11px;min-height:38px}
#daily-login-card #daily-login-claim{min-height:54px!important;font-size:clamp(12px,2vw,16px)!important;letter-spacing:.06em;border:2px solid #fff0bd;border-bottom:5px solid #73422e;background:linear-gradient(#f9d88d,#bb7639);box-shadow:inset 0 3px #fff9d969,0 5px #080911}
#daily-login-card #daily-login-claim:disabled{filter:none;opacity:.75;background:#403747;color:#dbcba8;border-color:#68586b}
#community-bounty{grid-column:1/-1;border-color:#687aa7!important;background:linear-gradient(125deg,#272542,#0f1725)!important}
#community-bounty .retention-heading{color:#c4d1ff!important}
#community-reward{font:900 13px var(--font-mono);color:#f0dba1;padding:9px;border:1px solid #70668a;background:#101424;margin:8px 0}
#community-join{min-height:43px;width:100%;border:2px solid #9ca7d9;background:#343a6a;color:#f4f1ff;font:900 14px var(--font-head)}
#community-join:disabled{opacity:.62}
#community-verify{min-height:42px;width:100%;margin-top:7px;border:2px solid #b7c89c;background:#273927;color:#dbf8c8;font:900 12px var(--font-head);letter-spacing:.06em}
#community-verify:disabled{opacity:.55;background:#202632;color:#9a9db3;border-color:#61657c}
#community-claim-status{min-height:22px;color:#afbad5!important}
/* BUILD 156 · Official skull reveals LEFT TO RIGHT, actual image not fake %.
   Keep the animation readable even when preflight finishes very quickly. */
#loading-screen .dt-load-art{display:none!important}
#loading-screen .dt-load-panel{padding-top:24px;background:radial-gradient(ellipse at 50% 8%,#301921,#100d16 58%,#08090c)!important;border-color:#79424b}
#loading-screen .dt156-load-skull{position:relative;width:min(200px,58vw);height:130px;margin:16px auto 11px;overflow:hidden;filter:drop-shadow(0 4px 0 #09080d)}
#loading-screen .dt156-load-skull::before,#loading-screen .dt156-load-skull-fill{position:absolute;inset:0;background-image:url('assets/ui/skull-cutout.png');background-repeat:no-repeat;background-position:center;background-size:contain;image-rendering:pixelated}
#loading-screen .dt156-load-skull::before{content:'';filter:grayscale(1) brightness(.19);opacity:.88}
#loading-screen .dt156-load-skull-fill{clip-path:inset(0 100% 0 0);animation:dt156-skull-load 2.25s steps(28,end) infinite;filter:drop-shadow(0 0 5px #db7155)}
#loading-screen .dt156-load-skull::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:repeating-linear-gradient(90deg,#734956 0 6px,transparent 6px 13px);opacity:.45}
@keyframes dt156-skull-load{0%{clip-path:inset(0 100% 0 0)}80%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@media(prefers-reduced-motion:reduce){#loading-screen .dt156-load-skull-fill{animation:none;clip-path:inset(0 0 0 0)}}
@media(max-width:650px){#skill-training{padding:13px 8px 18px}#skill-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 8px}#skill-list .skill-node:nth-child(3)::before{content:""}#skill-list .skill-node{min-height:200px;padding:10px 6px}#skill-list .skill-node-title svg{width:28px;height:28px;padding:10px}#skill-list .skill-node-title b{font-size:14px}#skill-list .skill-node p{font-size:9px}}
@media(prefers-reduced-motion:reduce){#skill-list .skill-node,#daily-login-card .daily-login-day{animation:none!important;transition:none!important}}