@font-face{font-family:"Devil Tail";src:url("/pageassets/fonts/deviltail.otf") format("opentype");font-display:swap}
:root{
  --void:#0b0607;
  --smoke:#2e1a1e;
  --ash:#a3908f;
  --bone:#efe3df;
  --ember:#f5093d;
  --wine:#9b1c5c;
  --ember-dim:#5c0f22;
  --display:"Devil Tail",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}
body{margin:0;min-height:100%;background:var(--void);color:var(--bone);font-family:var(--mono);-webkit-font-smoothing:antialiased}
body.home{height:100%;overflow:hidden}
img{max-width:100%}
.stage{position:fixed;inset:0;touch-action:none;cursor:crosshair}
.stage canvas{position:absolute;inset:0;display:block}
#layers,#baked{position:absolute;inset:0}
#layers{transition:opacity .6s ease}
#layers.flare{animation:flare 1.5s ease-out}
#baked{transition:opacity .8s ease}
#ui{pointer-events:none}
@keyframes flare{0%{filter:brightness(2.6) saturate(1.4)}100%{filter:none}}
.devil{display:inline-block;padding:0 .15em .15em .35em;font-family:var(--display);font-weight:400;text-transform:lowercase;line-height:1.1;color:#ec3a6a}
.devil::first-letter{font-feature-settings:"ss01"}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .devil{background:linear-gradient(var(--ember),var(--wine));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.top{position:fixed;top:0;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;padding-top:calc(10px + env(safe-area-inset-top,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.logo{text-decoration:none;pointer-events:auto;font-size:40px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(245,9,61,.28))}
.logo .devil{padding-left:0}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;pointer-events:auto}
nav a{color:var(--ash);text-decoration:none;font-size:13px;letter-spacing:.04em}
nav a:hover,nav a:focus-visible{color:var(--bone)}
nav .sep{width:1px;height:12px;background:var(--smoke)}
.play{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(104px,23vmin,156px);aspect-ratio:1;max-width:100%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-decoration:none;color:var(--bone);background:rgba(11,6,7,.9);border:1px solid var(--ember-dim);z-index:2;transition:border-color .6s,box-shadow .6s}
.play .devil{font-size:clamp(34px,7.4vmin,52px);filter:drop-shadow(0 0 8px rgba(245,9,61,.3));transition:filter .6s}
.play small{font-size:clamp(10px,1.6vmin,11px);color:var(--ash);letter-spacing:.06em;margin-top:-4px}
.play::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--ember);opacity:0;animation:pulse 3.2s ease-out infinite}
.play:hover,.play:focus-visible{border-color:var(--ember);outline:none}
.play:hover .devil{filter:drop-shadow(0 0 14px rgba(245,9,61,.7))}
.play.awake{border-color:var(--ember);box-shadow:0 0 30px rgba(245,9,61,.38),inset 0 0 18px rgba(245,9,61,.2)}
.play.awake .devil{filter:drop-shadow(0 0 14px rgba(245,9,61,.75))}
.play.awake::after{animation-duration:1.6s}
@keyframes pulse{0%{transform:scale(.94);opacity:.55}100%{transform:scale(1.18);opacity:0}}
.bottom{position:fixed;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none}
.hint{font-size:12px;color:var(--ash);max-width:44ch;line-height:1.5;min-width:0;transition:opacity 1.2s ease}
.hint.gone{opacity:0}
.gate{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(5,2,3,.8);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.gate[hidden]{display:none}
.gate-card{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:var(--void);border:1px solid var(--ember-dim);border-radius:6px;padding:26px 22px 22px;box-shadow:0 0 44px rgba(245,9,61,.2)}
.gate-card h2{margin:0;font-size:46px;font-weight:400;filter:drop-shadow(0 0 10px rgba(245,9,61,.3))}
.gate-card p{margin:0;font-size:13px;line-height:1.65;color:var(--bone);max-width:34ch}
.gate-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.gate-actions button{font:500 13px var(--mono);border-radius:3px;padding:9px 14px;cursor:pointer}
#gateYes{color:var(--bone);background:rgba(245,9,61,.14);border:1px solid var(--ember)}
#gateYes:hover{background:rgba(245,9,61,.26)}
#gateNo{color:var(--ash);background:transparent;border:1px solid var(--smoke)}
#gateNo:hover{color:var(--bone);border-color:var(--ember-dim)}
.gate-actions button:focus-visible{outline:1px solid var(--ember);outline-offset:2px}
.gate-card small{font-size:11px;color:var(--ash)}
.tools{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:auto}
.panel{display:flex;flex-direction:column;gap:6px;padding:10px;min-width:170px;background:rgba(11,6,7,.94);border:1px solid var(--smoke);border-radius:4px}
.panel button{display:flex;justify-content:space-between;gap:16px;font:500 12px var(--mono);color:var(--bone);background:transparent;border:1px solid var(--smoke);border-radius:3px;padding:7px 10px;cursor:pointer;text-align:left}
.panel button:hover{border-color:var(--ember-dim)}
.panel button:focus-visible{outline:1px solid var(--ember);outline-offset:2px}
.panel button span{color:#ff4d6d}
.sigil-btn{width:50px;height:50px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#c4243f;background:rgba(11,6,7,.88);border:1px solid var(--ember-dim);transition:color .3s,border-color .3s,box-shadow .3s}
.sigil-btn svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sigil-btn .orbit{transform-origin:20px 20px;animation:orbit 16s linear infinite}
.sigil-btn:hover,.sigil-btn:focus-visible,.sigil-btn[aria-expanded="true"]{color:#ff4d6d;border-color:var(--ember);box-shadow:0 0 16px rgba(245,9,61,.4);outline:none}
@keyframes orbit{to{transform:rotate(360deg)}}
#glitch{pointer-events:none}
.panel[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.play::after,#layers.flare,.sigil-btn .orbit{animation:none}#layers,#baked{transition:none}}
.page .top{position:sticky;top:0;z-index:4;padding-bottom:10px;background:rgba(11,6,7,.94);border-bottom:1px solid var(--smoke)}
.gl{max-width:900px;margin:0 auto;padding-top:44px;padding-bottom:64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:60px}
.gl-head h1{margin:0;font-size:clamp(52px,9vw,76px);font-weight:400;line-height:1;filter:drop-shadow(0 0 12px rgba(245,9,61,.28))}
.gl-head h1 .devil{padding-left:0}
.gl h2{margin:0;font-size:46px;font-weight:400;line-height:1;filter:drop-shadow(0 0 8px rgba(245,9,61,.25))}
.gl h2 .devil{padding-left:0}
.games-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.game{position:relative;min-width:0;display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;background:rgba(245,9,61,.035);border:1px solid var(--ember-dim);border-radius:6px}
.game p{margin:0;font-size:13px;line-height:1.7;color:var(--bone);max-width:60ch}
.game .meta{font-size:11px;letter-spacing:.06em;color:var(--ash)}
.game-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.btn{display:inline-block;font:500 13px var(--mono);color:var(--bone);text-decoration:none;padding:9px 14px;border:1px solid var(--smoke);border-radius:3px;background:transparent;cursor:pointer}
.btn:hover{border-color:var(--ember-dim)}
.btn:focus-visible{outline:1px solid var(--ember);outline-offset:2px}
.btn.primary{border-color:var(--ember);background:rgba(245,9,61,.14)}
.btn.primary:hover{background:rgba(245,9,61,.26)}
.game.soon{align-items:center;justify-content:center;text-align:center;min-height:130px;background:transparent;border:1px dashed var(--smoke);color:var(--ash);font-size:13px}
.support{display:flex;flex-direction:column;gap:16px}
.support>p{margin:0;font-size:13px;line-height:1.7;color:var(--bone);max-width:60ch}
.coins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;margin-top:6px}
.coin{max-width:520px;min-width:0;display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--smoke);border-radius:6px}
.coin img{width:96px;height:96px;flex:none;border-radius:4px;background:#fff}
.coin div{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.coin b{font-weight:500;font-size:13px}
.coin small{font-size:11px;color:var(--ash)}
.coin code{font:12px var(--mono);color:var(--bone);word-break:break-all;line-height:1.5}
.coin .btn{padding:5px 10px;font-size:12px}
.foot{padding-bottom:28px;text-align:center;font-size:11px;color:var(--ash)}
.card-runes{position:absolute;left:-15px;top:-15px;pointer-events:none;z-index:1}
.tags{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.tag-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:start}
.tag-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);padding-top:6px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:12px;line-height:1.3;color:var(--bone);padding:5px 9px;border:1px solid var(--smoke);border-radius:3px;background:rgba(11,6,7,.6)}
.tag-row:first-child .chips li{border-color:var(--ember-dim)}
.adult-tags{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.tag-toggle{font:500 12px var(--mono);color:#ff4d6d;background:transparent;border:1px dashed var(--ember-dim);border-radius:3px;padding:6px 10px;cursor:pointer}
.tag-toggle:hover{border-style:solid}
.tag-toggle:focus-visible{outline:1px solid var(--ember);outline-offset:2px}
.tears{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.tear{position:absolute;left:0;right:0;background:rgba(245,9,61,.55)}
.tear.cyan{background:rgba(90,255,240,.35)}
.gl{position:relative;z-index:1;overflow-x:clip}
.glitching{animation:glt .3s steps(1,end) both}
@keyframes glt{
0%{transform:translateX(-4px);text-shadow:3px 0 rgba(90,255,240,.55),-3px 0 rgba(245,9,61,.75);clip-path:inset(18% 0 46% 0)}
25%{transform:translateX(5px);clip-path:inset(62% 0 8% 0)}
50%{transform:translateX(-2px);text-shadow:-2px 0 rgba(90,255,240,.55),2px 0 rgba(245,9,61,.75);clip-path:inset(4% 0 72% 0)}
75%{transform:translateX(3px);clip-path:inset(38% 0 30% 0)}
100%{transform:none;text-shadow:none;clip-path:none}
}
@media (max-width:560px){.tag-row{grid-template-columns:minmax(0,1fr);gap:6px}.tag-label{padding-top:0}}
@media (prefers-reduced-motion:reduce){.glitching{animation:none}}
.games-grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.game .greet{font-family:var(--mono);font-size:18px;font-weight:500;line-height:1.4;filter:none;color:var(--bone)}
.game a.inline{color:#ff4d6d}
.game a.inline:hover{color:var(--bone)}
.choose-head{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.eyes{width:min(220px,58vw);height:auto;overflow:visible;transition:filter .3s}
.eyes .eye{transform-box:fill-box;transform-origin:center;transition:transform .07s ease-in}
.eyes.blink .eye{transform:scaleY(.06)}
.eyes .lid{fill:#13050a;stroke:var(--ember-dim);stroke-width:1.5}
.eyes .pupil{fill:#ff2a4d}
.eyes{filter:drop-shadow(0 0 6px rgba(255,42,77,.45))}
.eyes.flare{filter:drop-shadow(0 0 14px rgba(255,42,77,.95)) brightness(1.6)}
.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:48px 32px;justify-items:center}
.portal-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;max-width:360px;min-width:0}
.portal{display:block;width:min(290px,76vw);aspect-ratio:1;max-width:100%;border-radius:50%;cursor:pointer}
.portal canvas{display:block;width:100%;height:100%}
.portal-card h2 .devil{padding-left:.35em}
.portal-card p{margin:0;font-size:13px;line-height:1.7;color:var(--bone);max-width:36ch}
@media (prefers-reduced-motion:reduce){.eyes .eye{transition:none}}
.portal{position:relative}
.portal.big{width:min(380px,82vw)}
.altar-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:clamp(34px,6vw,46px);pointer-events:none;filter:drop-shadow(0 0 10px rgba(245,9,61,.6))}
.altar{display:flex;justify-content:center}
.altar-card{max-width:520px}
.altar-card .meta{margin:0;font-size:11px;letter-spacing:.08em;color:var(--ash)}
.choose-head .greet{margin:0;font-size:15px;color:var(--bone)}
.perks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.perks li{font-size:12px;padding:6px 10px;color:var(--bone);border:1px solid var(--ember-dim);border-radius:3px;background:rgba(245,9,61,.06);opacity:0;transform:translateY(6px);animation:perk .5s ease forwards}
.perks li::before{content:"\2713\00a0";color:#ff4d6d}
.perks li:nth-child(1){animation-delay:1.1s}
.perks li:nth-child(2){animation-delay:1.35s}
.perks li:nth-child(3){animation-delay:1.6s}
.perks li:nth-child(4){animation-delay:1.85s}
@keyframes perk{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.perks li{animation:none;opacity:1;transform:none}}
.lost{align-items:center;text-align:center;padding-top:12vh}
.lost-actions{justify-content:center}