:root{--text:#222;--background:#FFE;--selected:#EE7;--unselected:#AAA;--border:#666;--error:#933;--warn:#D84315;--ok:#393;--translucent-hide-color:#333D}
*{box-sizing:border-box}
html{margin:2vmin;padding:0;background-color:var(--background)}
body{padding:0;color:var(--text);max-width:80em;margin:0.2em auto}
h1{text-align:center}
canvas{display:block;width:96vmin;height:80vmin;max-width:40em;max-height:40em;margin:auto}
.text-height:empty::after{content:'\200b'}
#guess{font:bold 9vmin monospace;text-align:center}
#status{font-size:4vmin;text-align:center}
#status.not-found{color:var(--error)}
#status.not-yet-found{color:var(--unselected)}
#status.already-found{color:var(--ok)}
#status.new-word{color:var(--ok);font-weight:bold}
#summary{font-size:4vmin;text-align:center}
#found{column-width:9em;column-gap:1em;margin:0.5em}
#found ul{margin:0;padding:0;list-style-type:none}
#found .new-word{font-weight:bold}
#found .not-found,#found .hint{color:var(--warn)}
#found .hint{color:var(--warn)}
#found .bonus{color:var(--ok)}
#found .score{font-size:90%;vertical-align:super}
#found li{cursor:pointer}
fieldset{margin:0.3em}
#challenge-created-url{width:100%}
#challenge-created-copied{opacity:0;transition:opacity 0.5s ease-in}
#challenge-created-copied.shown{opacity:1}
#lightBoxBg{z-index:9997;width:100vw;height:100vh;position:fixed;background-color:var(--translucent-hide-color);left:0;top:0;display:none}
#lightBoxBg::before{content:'ⓧ';color:#C90;position:fixed;z-index:9999;top:.1em;left:.3em;font-size:150%}
.lightBoxCenterContent{z-index:9998;position:fixed;background-color:var(--background);top:50%;left:50%;transform:translate(-50%,-50%);padding:1em;display:none;text-align:left}
#config{width:98vw;max-width:40em;margin:0 auto;height:98vh;max-height:60em;overflow-y:auto}
#hamburger{position:absolute;top:0.3em;right:.3em;height:8vmin;aspect-ratio:1;background:radial-gradient(closest-side at 12.5% 25%,var(--text) 97%,#0000 101%) 0 0/80% 40%,linear-gradient(var(--text) 50%,#0000 0) top/80% 40% repeat-y;}
.init-hide{display:none}
#game-area{position:relative}
button{display:inline-block}
#end-game-buttons{text-align:center}
#end-game-buttons button{margin:0.4em}
#buttons{position:absolute;bottom:0.1em;right:0.1em;text-align:right;margin:0;padding:0}
#buttons button{margin:0.4em 0;min-width:3.5em;display:none}
#score{position:absolute;bottom:-.2em;left:0.1em;text-align:left;margin:0;padding:0;font-size:7vmin;font-weight:bold}
#timer{position:absolute;top:-.2em;left:0.1em;text-align:left;margin:0;padding:0;font-size:7vmin;font-weight:bold}
#word-info h2 {text-align:center;text-transform:capitalize;text-decoration:underline}
.not-in-word-list{text-decoration:line-through}
.unmet{color:var(--warn)}
.tab{background:var(--unselected);cursor:pointer;display:inline-block;border:1px solid var(--border);border-bottom:0;border-radius:0.5em 0.5em 0 0;width:fit-content;padding:0.2em 0.5em;font-size:130%;font-weight:bold}
.tab.selected{background:var(--background)}
.tab-content{display:none}
#board-config img{width:15em;border-radius:1em;padding:1.5em}
#board-config input[type="radio"]{display:none}
#board-config input[type="radio"]:checked ~ *{background-color:var(--selected)}
table{border-collapse:collapse;margin:1em auto}
tbody>tr>td,tbody>tr>th{border:1px solid var(--border);padding:0.3em}
#scoreboard table,#word-info table{width:100%;margin:0;padding:0;border-spacing:0.1em}
#scoreboard table td{margin:0;padding:0}
#scoreboard .score{font-weight:bold;font-size:180%;text-align:center}
td.num {text-align:right}
@media(orientation:landscape){
#game-and-found{display:flex;flex-direction:row;gap:1em}
#found{margin:0;height:96vh}
#found,#game-area{max-height:45em}
}
@media(orientation:landscape) and (min-height:900px),(orientation:portrait) and (min-width:900px){
#hamburger{height:72px}
#timer,#score{font-size:63px}
#guess{font-size:81px}
#status{font-size:36px}
}
@media(orientation:landscape) and (min-width:900px){
#game-area{width:75vw;max-width:60vw}
}
@media(max-width:650px){
#board-config img{width:40vw}
}