css.css

body{flex-direction:column;justify-content:center;align-items:center;display:flex}@property --hypot{syntax:"<length>";inherits:true;initial-value:0}.hidden{pointer-events:none;opacity:0;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:0;height:0;position:absolute;overflow:hidden}#word-list{grid-template-columns:repeat(4,1fr);gap:1rem;margin:0;padding:0;list-style:none;display:grid}#word-list>li{text-align:center;border-radius:1lh}#word-list>li.found{background-color:oklch(75% 75% calc(var(--hue)*1deg))}#jamo-board{grid-template-columns:repeat(var(--width),1fr);gap:var(--gap);aspect-ratio:1;touch-action:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0;display:grid;position:relative}#jamo-board,#jamo-board:active>i{cursor:url(images/cursor.svg) 12 12,auto}#jamo-board>i{text-align:center;width:calc(var(--size));height:calc(var(--size));font-size:var(--size);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:none;font-style:normal;line-height:1;display:inline-block;position:relative}#jamo-board>i:after{content:attr(data-jamo);display:inline-block}:root[data-mode=dark] #jamo-board>i:before{background-color:#fff}:root[data-mode=light] #jamo-board>i:before{background-color:#000}:root[data-mode=light] #jamo-board>.completion-bar:before{opacity:.6}@media (prefers-color-scheme:dark){:root[data-mode=system] #jamo-board>i:before{background-color:#fff}}@media (prefers-color-scheme:light){:root[data-mode=system] #jamo-board>i:before{background-color:#000}:root[data-mode=system] #jamo-board>.completion-bar:before{opacity:.6}}#jamo-board>i:before{content:"";width:calc(var(--size)*1.414);height:calc(var(--size)*1.414);pointer-events:none;opacity:0;z-index:-1;border-radius:50%;display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#jamo-board:not(:active)>i:hover:before{opacity:.15}#jamo-board>.completion-bar{--transition-speed:.15s;top:calc(var(--top));left:calc(var(--left));width:calc(var(--width));height:calc(var(--height));transition:width var(--transition-speed)ease-out,height var(--transition-speed)ease-out,top var(--transition-speed)ease-out,left var(--transition-speed)ease-out;pointer-events:none;position:absolute}#jamo-board>.completion-bar:before{content:"";background-color:oklch(75% 75% calc(var(--hue)*1deg));height:calc(var(--thick));width:calc(var(--hypot));transition:width var(--transition-speed)ease-out;transform:translate(-50%,-50%)rotate(var(--angle));transform-origin:50%;mix-blend-mode:overlay;opacity:.5;z-index:-2;border-radius:calc(var(--thick));position:absolute;top:50%;left:50%}@media (prefers-reduced-motion:reduce){#jamo-board>.completion-bar,#jamo-board>.completion-bar:before{transition:none}}nav{height:2rem}#dark-mode-toggle{z-index:1;cursor:pointer;view-transition-name:none;-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;display:flex;position:absolute;top:1rem;right:1rem;overflow:hidden;transform:rotate(45deg)}.no-transition,.no-transition *{transition:none!important}#dark-mode-toggle>#sun,#dark-mode-toggle>#moon{text-align:center;width:100%;height:100%;font-size:1.5rem;line-height:1;transition:-webkit-clip-path .5s,clip-path .5s;position:absolute;top:0;left:0;overflow:hidden}#dark-mode-toggle>#sun{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background-color:buttonface}#dark-mode-toggle>#moon{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background-color:buttonface}#dark-mode-toggle>#sun:before,#dark-mode-toggle>#moon:before{display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)}#dark-mode-toggle>#sun:before{content:"☀️"}#dark-mode-toggle>#moon:before{content:"🌙"}:root[data-mode=system]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root[data-mode=system]{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-mode=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-mode=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}#dark-mode-toggle[data-mode=system]>#sun{clip-path:rect(0 50% 100% 0)}#dark-mode-toggle[data-mode=system]>#moon{clip-path:rect(0 100% 100% 50%)}#dark-mode-toggle[data-mode=dark]>#sun{clip-path:rect(0 0 100% 0)}#dark-mode-toggle[data-mode=dark]>#moon,#dark-mode-toggle[data-mode=light]>#sun{clip-path:rect(0 100% 100% 0)}#dark-mode-toggle[data-mode=light]>#moon{clip-path:rect(0 100% 100% 100%)}#currentJamoCompletions{position:absolute}@media screen and (min-width:720px){#word-list{animation:none}}main{font-size:0}main>*{font-size:1rem}.noresize{resize:none}#file-wrapper{text-align:center;border:1px solid buttonborder;border-radius:2px;width:150px;height:100px;display:inline-block;position:relative}#file-wrapper:where(:focus-visible,:focus-within){outline:-webkit-focus-ring-color auto 1px}#select-game-state-file{cursor:pointer;opacity:0;width:100%;height:100%;position:absolute;top:0;left:0}#file-wrapper:before{content:"📁";margin-bottom:10px;font-size:50px;display:block}#file-wrapper:after{content:attr(data-text);width:100%;font-size:14px;display:block;position:absolute;bottom:50%;translate:0 calc(50% + 1.5lh)}#file-wrapper[data-filename]:after{content:attr(data-filename)}::-ms-backdrop{background:rgba(0,0,0,.267)}::backdrop{background:rgba(0,0,0,.267)}#clear-game-state{-webkit-user-select:none;-ms-user-select:none;user-select:none;--pressed:0;position:relative}#clear-game-state:active{--pressed:100%}#clear-game-state:active:after{transition:-webkit-clip-path 2s linear,clip-path 2s linear}#clear-game-state:after{content:"";opacity:.5;clip-path:xywh(0 0 var(--pressed)100%);background:currentColor;width:100%;height:100%;display:inline-block;position:absolute;top:0;left:0}.br{width:0;height:1rem;min-height:1rem;display:block}nav>div:has(#stage){white-space:nowrap}body:has(dialog[open]){scrollbar-gutter:stable;overflow:hidden}dialog[open].bump{animation:.2s linear bump}@keyframes bump{0%{transform:scale(1.01)}to{transform:scale(1)}}:has(input.success-report){position:relative}input.success-report{opacity:0;pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;text-align:center;position:absolute;top:0;bottom:0;left:0;right:0}#keyboard-mode-toggle{pointer-events:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;opacity:0;color:buttontext;background-color:buttonface;padding:1em;position:absolute;top:.5em;left:50%;translate:-50%}#keyboard-mode-toggle:focus{opacity:1;pointer-events:auto;-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}