How i'm able to make games on my profile

The <details> tag is the secret behind the various apps on my profile. But how does a tag make a game? Because tags can be open and closed you can use them to remember a state even if radio buttons check boxes and such are not supported on the platform. Lets look at one of the apps probably the most clever one hangman. Each letter of the keyboard is a details tag. Each time a player guesses a letter, the corresponding detail element's state changes, either marking it as correct or incorrect based on whether the letter exists in the word. CSS selectors can "react" to that open state and use it to do something. Confused? heres the actual html so you can take a look


<details class="folder" open=""><summary>✦ details hangman ✦</summary><div class="slot"><div class="hm-wrap"><div class="hm-title">tiny details hangman</div><div class="hm-stage"><div class="hm-gallows"><span class="hm-part hm-top"></span><span class="hm-part hm-post"></span><span class="hm-part hm-base"></span><span class="hm-part hm-rope"></span><span class="hm-part hm-head"></span><span class="hm-part hm-body"></span><span class="hm-part hm-arm1"></span><span class="hm-part hm-arm2"></span><span class="hm-part hm-leg1"></span><span class="hm-part hm-leg2"></span></div><div class="hm-word"><span class="hm-slot hm-d-slot"><b>D</b></span><span class="hm-slot hm-r-slot"><b>R</b></span><span class="hm-slot hm-e-slot"><b>E</b></span><span class="hm-slot hm-a-slot"><b>A</b></span><span class="hm-slot hm-m-slot"><b>M</b></span></div></div><div class="hm-misses">misses: <span class="hm-bad hm-bad-b">B </span><span class="hm-bad hm-bad-c">C </span><span class="hm-bad hm-bad-f">F </span><span class="hm-bad hm-bad-g">G </span><span class="hm-bad hm-bad-h">H </span><span class="hm-bad hm-bad-i">I </span><span class="hm-bad hm-bad-j">J </span><span class="hm-bad hm-bad-k">K </span><span class="hm-bad hm-bad-l">L </span><span class="hm-bad hm-bad-n">N </span><span class="hm-bad hm-bad-o">O </span><span class="hm-bad hm-bad-p">P </span><span class="hm-bad hm-bad-q">Q </span><span class="hm-bad hm-bad-s">S </span><span class="hm-bad hm-bad-t">T </span><span class="hm-bad hm-bad-u">U </span><span class="hm-bad hm-bad-v">V </span><span class="hm-bad hm-bad-w">W </span><span class="hm-bad hm-bad-x">X </span><span class="hm-bad hm-bad-y">Y </span><span class="hm-bad hm-bad-z">Z </span></div><div class="hm-keys"><details class="hm-key hm-good hm-a"><summary>A</summary></details><details class="hm-key hm-wrong hm-b"><summary>B</summary></details><details class="hm-key hm-wrong hm-c"><summary>C</summary></details><details class="hm-key hm-good hm-d"><summary>D</summary></details><details class="hm-key hm-good hm-e"><summary>E</summary></details><details class="hm-key hm-wrong hm-f"><summary>F</summary></details><details class="hm-key hm-wrong hm-g"><summary>G</summary></details><details class="hm-key hm-wrong hm-h"><summary>H</summary></details><details class="hm-key hm-wrong hm-i"><summary>I</summary></details><details class="hm-key hm-wrong hm-j"><summary>J</summary></details><details class="hm-key hm-wrong hm-k"><summary>K</summary></details><details class="hm-key hm-wrong hm-l"><summary>L</summary></details><details class="hm-key hm-good hm-m"><summary>M</summary></details><details class="hm-key hm-wrong hm-n"><summary>N</summary></details><details class="hm-key hm-wrong hm-o"><summary>O</summary></details><details class="hm-key hm-wrong hm-p"><summary>P</summary></details><details class="hm-key hm-wrong hm-q"><summary>Q</summary></details><details class="hm-key hm-good hm-r"><summary>R</summary></details><details class="hm-key hm-wrong hm-s"><summary>S</summary></details><details class="hm-key hm-wrong hm-t"><summary>T</summary></details><details class="hm-key hm-wrong hm-u"><summary>U</summary></details><details class="hm-key hm-wrong hm-v"><summary>V</summary></details><details class="hm-key hm-wrong hm-w"><summary>W</summary></details><details class="hm-key hm-wrong hm-x"><summary>X</summary></details><details class="hm-key hm-wrong hm-y"><summary>Y</summary></details><details class="hm-key hm-wrong hm-z"><summary>Z</summary></details></div><div class="hm-win">solved ✦</div></div></div></details>






So what does this html do how does it magically make a game? well it doesn't not yet the other aspect CSS is what truly makes it functional heres the relevant css for functionality.

.hm-wrap{max-width:280px;padding:14px;text-align:center;color:#9b2a72;background:linear-gradient(160deg,#ffe5f3 0%,#eef7ff 48%,#fff0fa 100%);border:2px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 8px 28px rgba(220,120,190,.22),inset 0 1px 0 white;}
.hm-title{font-size:15px;color:#ff4fa3;text-shadow:1px 1px white;margin-bottom:8px;}
.hm-stage{display:grid;grid-template-columns:92px 1fr;gap:10px;align-items:center;margin-bottom:12px;}
.hm-gallows{position:relative;height:122px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,120,190,.18);}
.hm-part{position:absolute;opacity:0;background:#ff78b9;transition:.18s ease;}
.hm-top{left:25px;top:15px;width:48px;height:5px;border-radius:5px;}.hm-post{left:25px;top:15px;width:5px;height:84px;border-radius:5px;}.hm-base{left:14px;top:96px;width:68px;height:5px;border-radius:5px;}.hm-rope{left:69px;top:18px;width:3px;height:20px;border-radius:5px;background:#c77bdc;}.hm-head{left:57px;top:37px;width:25px;height:25px;border:4px solid #ff78b9;border-radius:50%;background:transparent;}.hm-body{left:69px;top:65px;width:4px;height:30px;border-radius:5px;}.hm-arm1{left:69px;top:70px;width:4px;height:24px;border-radius:5px;transform:rotate(38deg);transform-origin:top;}.hm-arm2{left:69px;top:70px;width:4px;height:24px;border-radius:5px;transform:rotate(-38deg);transform-origin:top;}.hm-leg1{left:69px;top:92px;width:4px;height:24px;border-radius:5px;transform:rotate(28deg);transform-origin:top;}.hm-leg2{left:69px;top:92px;width:4px;height:24px;border-radius:5px;transform:rotate(-28deg);transform-origin:top;}
.hm-word{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}.hm-slot{height:34px;display:grid;place-items:center;border-radius:10px;border-bottom:3px solid #ff83c6;background:rgba(255,255,255,.68);}.hm-slot b{opacity:0;color:#26b978;font-size:18px;transform:translateY(5px);transition:.16s ease;}
.hm-misses{min-height:22px;margin:8px 0 10px;font-size:10px;color:#c774bb;}.hm-bad{display:none;color:#ff4f7a;}
.hm-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}.hm-key{margin:0;padding:0;border:0;background:transparent;}.hm-key summary{list-style:none;cursor:pointer;display:grid;place-items:center;height:28px;border-radius:50%;color:#b04faa;font-size:11px;background:radial-gradient(circle at 35% 30%,white,#ffd5ec 55%,#e8d6ff);box-shadow:0 2px 8px rgba(180,120,220,.22),inset 0 1px 0 white;}.hm-key summary::-webkit-details-marker{display:none;}.hm-key[open] summary{transform:scale(.9);}.hm-good[open] summary{color:white;background:radial-gradient(circle,#8df0bd,#36c97c);}.hm-wrong[open] summary{color:white;background:radial-gradient(circle,#ff9abc,#ff4f8d);}

/* letter reveal logic */
.hm-wrap:has(.hm-a[open]) .hm-a-slot b,.hm-wrap:has(.hm-d[open]) .hm-d-slot b,.hm-wrap:has(.hm-e[open]) .hm-e-slot b,.hm-wrap:has(.hm-r[open]) .hm-r-slot b,.hm-wrap:has(.hm-m[open]) .hm-m-slot b{opacity:1;transform:translateY(0);}

/* missed letter reveal */
.hm-wrap:has(.hm-b[open]) .hm-bad-b,.hm-wrap:has(.hm-c[open]) .hm-bad-c,.hm-wrap:has(.hm-f[open]) .hm-bad-f,.hm-wrap:has(.hm-g[open]) .hm-bad-g,.hm-wrap:has(.hm-h[open]) .hm-bad-h,.hm-wrap:has(.hm-i[open]) .hm-bad-i,.hm-wrap:has(.hm-j[open]) .hm-bad-j,.hm-wrap:has(.hm-k[open]) .hm-bad-k,.hm-wrap:has(.hm-l[open]) .hm-bad-l,.hm-wrap:has(.hm-n[open]) .hm-bad-n,.hm-wrap:has(.hm-o[open]) .hm-bad-o,.hm-wrap:has(.hm-p[open]) .hm-bad-p,.hm-wrap:has(.hm-q[open]) .hm-bad-q,.hm-wrap:has(.hm-s[open]) .hm-bad-s,.hm-wrap:has(.hm-t[open]) .hm-bad-t,.hm-wrap:has(.hm-u[open]) .hm-bad-u,.hm-wrap:has(.hm-v[open]) .hm-bad-v,.hm-wrap:has(.hm-w[open]) .hm-bad-w,.hm-wrap:has(.hm-x[open]) .hm-bad-x,.hm-wrap:has(.hm-y[open]) .hm-bad-y,.hm-wrap:has(.hm-z[open]) .hm-bad-z{display:inline;}

/* gallows part reveal on wrong guesses */
.hm-wrap:has(.hm-b[open]) .hm-top,.hm-wrap:has(.hm-c[open]) .hm-post,.hm-wrap:has(.hm-f[open]) .hm-base,.hm-wrap:has(.hm-g[open]) .hm-rope,.hm-wrap:has(.hm-h[open]) .hm-head,.hm-wrap:has(.hm-i[open]) .hm-body,.hm-wrap:has(.hm-j[open]) .hm-arm1,.hm-wrap:has(.hm-k[open]) .hm-arm2,.hm-wrap:has(.hm-l[open]) .hm-leg1,.hm-wrap:has(.hm-n[open]) .hm-leg2{opacity:1;}

/* win condition */
.hm-win{display:none;margin-top:9px;font-size:11px;color:#22bb66;text-shadow:0 0 8px rgba(100,255,180,.35);}.hm-wrap:has(.hm-a[open]):has(.hm-d[open]):has(.hm-e[open]):has(.hm-r[open]):has(.hm-m[open]) .hm-win{display:block;}