/* Wordminer. Windows 3.1, on purpose.
   One palette, no dark mode: the teal desktop and grey window ARE the design. */
:root{
  --desk:#008080; --face:#C0C0C0; --hi:#FFFFFF; --sh:#808080; --dk:#000000;
  --navy:#000080; --ink:#000000;
  --cell:40px; --font:"Tahoma","MS Sans Serif","Geneva",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--desk);font-family:var(--font);font-size:13px;color:var(--ink);
     padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;
     -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
     padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
@media (max-width:420px){ :root{--cell:38px} body{padding-top:calc(10px + env(safe-area-inset-top,0px))} }
@media (max-width:360px){ :root{--cell:34px} }

/* bevels */
.out{position:relative;border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);background:var(--face)}
.out::before{content:"";display:block;position:absolute;inset:0;pointer-events:none;
  border:1px solid;border-color:var(--face) var(--sh) var(--sh) var(--face)}
.btn{font:inherit;font-weight:700;background:var(--face);color:var(--ink);cursor:pointer;
     border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px 0 var(--sh),inset 1px 1px 0 var(--face);
     padding:4px 14px;min-width:78px}
.btn:active,.btn.down{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px 0 var(--sh);padding:5px 13px 3px 15px}
.btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}
.btn[disabled]{color:var(--sh);text-shadow:1px 1px 0 var(--hi);cursor:default}

/* window */
.win{width:max-content;max-width:100%;padding:2px}
.title{background:var(--navy);color:var(--hi);font-weight:700;display:flex;align-items:center;gap:6px;padding:2px 3px;margin:1px 1px 0;height:18px}
.title .sys{width:16px;height:14px;background:var(--face);border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);position:relative;flex:none}
.title .sys::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:3px;background:var(--hi);border:1px solid var(--dk);border-width:1px 0;box-shadow:0 1px 0 var(--sh)}
.title .t{flex:1;text-align:center;letter-spacing:.2px}
.title .beta{font-weight:400;font-size:10px;opacity:.85;margin-left:4px;text-transform:uppercase;letter-spacing:1px}
.title .wb{width:16px;height:14px;background:var(--face);border:1px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);color:var(--dk);font-size:9px;line-height:12px;text-align:center;flex:none}
.menubar{display:flex;gap:2px;padding:2px 4px;margin:1px;position:relative}
.menubar>button{font:inherit;background:none;border:0;padding:2px 6px;color:var(--ink);cursor:pointer}
.menubar button u{text-decoration:underline}
.menubar>button.open{background:var(--navy);color:var(--hi)}
.dd{position:absolute;top:100%;left:4px;z-index:5;background:var(--face);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);
    box-shadow:inset -1px -1px 0 var(--sh);min-width:190px;padding:2px}
.dd[hidden]{display:none}
.dd button{display:block;width:100%;text-align:left;padding:3px 24px 3px 22px;white-space:nowrap;font:inherit;background:none;border:0;color:var(--ink);cursor:pointer}
.dd button:hover{background:var(--navy);color:var(--hi)}
.dd button[disabled]{color:var(--sh);text-shadow:1px 1px 0 var(--hi)}
.dd button[disabled]:hover{background:none;color:var(--sh)}
.dd hr{border:0;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);margin:3px 1px}
.body{padding:6px;margin:0 1px 1px}
.inner{border:3px solid;border-color:var(--hi) var(--sh) var(--sh) var(--hi);padding:6px}

/* status panel */
.panel{display:flex;align-items:center;justify-content:space-between;padding:4px 5px;margin-bottom:6px;border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.led{display:flex;gap:1px;background:#000;padding:1px;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.led svg{width:13px;height:23px;display:block}
.ledwrap{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px}
.ledwrap small{font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:#404040}
.lives{display:flex;gap:2px;padding:3px 5px;background:var(--face);border:2px solid;border-color:var(--hi) var(--sh) var(--sh) var(--hi);box-shadow:inset -1px -1px 0 var(--sh)}
.bot{width:30px;height:30px;display:block;transition:filter .3s,opacity .3s,transform .2s}
.bot.lost{filter:grayscale(1) contrast(.6);opacity:.35;transform:rotate(-12deg) scale(.9)}
.bot.ouch{animation:ouch .55s ease-out}
.bot.happy{animation:hop .5s ease-in-out infinite alternate}
@keyframes ouch{0%{transform:scale(1)}20%{transform:scale(1.35) rotate(8deg)}45%{transform:scale(1.2) rotate(-10deg)}70%{transform:scale(1.1) rotate(6deg)}100%{transform:rotate(-12deg) scale(.9)}}
@keyframes hop{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.bot,.c{animation:none!important;transition:none}}

/* board */
.board{display:grid;grid-template-columns:repeat(8,var(--cell));grid-auto-rows:var(--cell);border:3px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);background:var(--face);width:max-content}
.c{position:relative;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(var(--cell)*.5);line-height:1;cursor:pointer;touch-action:manipulation}
.c:focus-visible{outline:1px dotted var(--ink);outline-offset:-4px}
.c.hid{border:3px solid;border-color:var(--hi) var(--sh) var(--sh) var(--hi);background:var(--face)}
.c.hid:active{border:1px solid var(--sh);border-width:1px 0 0 1px}
.c.rev{border:1px solid var(--sh);border-width:1px 0 0 1px;cursor:default}
.c.rev.let{background:#E8E8E8;color:var(--ink);font-family:"Verdana",var(--font);font-size:calc(var(--cell)*.52)}
.c.rev.let.done{background:#FFFFFF;color:var(--navy)}
.c.rev.let.pop{animation:pop .25s ease-out}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.c.n1{color:#0000FF}.c.n2{color:#008000}.c.n3{color:#FF0000}.c.n4{color:#000080}.c.n5{color:#800000}.c.n6{color:#008080}.c.n7{color:#000000}.c.n8{color:#808080}
.c.boom{background:#FF0000}
.c svg{width:60%;height:60%;display:block}
.c.hid svg{width:55%;height:55%}
.c.wrong::after{content:"";position:absolute;inset:0;background:
  linear-gradient(45deg,transparent 46%,#FF0000 46%,#FF0000 54%,transparent 54%),
  linear-gradient(-45deg,transparent 46%,#FF0000 46%,#FF0000 54%,transparent 54%)}

/* progress: the Windows 3.1 file-copy bar, blue blocks in a sunken trough */
.progress{display:flex;align-items:center;gap:8px;margin-top:8px}
.bar{flex:1;height:14px;border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);background:var(--hi);padding:1px;position:relative}
.fill{height:100%;background:repeating-linear-gradient(90deg,var(--navy) 0 7px,var(--hi) 7px 9px);width:0;transition:width .25s ease-out}
.ptext{font-size:11px;color:#303030;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptext b{color:var(--navy)}
/* below board */
.tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}
.flagbtn{display:flex;align-items:center;gap:6px;min-width:0}
.flagbtn svg{width:18px;height:18px}
.words{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:"Verdana",var(--font);font-size:12px;letter-spacing:2px;max-width:calc(var(--cell)*8 + 6px)}
.words span{white-space:nowrap}
.words span.pop{animation:pop .3s ease-out}
.words:empty{display:none}
.tools .btn{min-width:0}
.words .got{color:var(--navy);font-weight:700}
.theme{font-size:12px;color:#303030;margin-top:6px}
.theme b{color:var(--navy)}
.howto{margin-top:6px;font-size:12px;color:#303030}
.howto summary{cursor:pointer;color:var(--navy);text-decoration:underline;list-style:none;width:max-content;padding:2px 0}
.howto summary::-webkit-details-marker{display:none}
.howto summary:focus-visible{outline:1px dotted var(--ink)}
.howto ul{margin:6px 0 2px;padding-left:16px;max-width:calc(var(--cell)*8 + 6px);line-height:1.45}
.howto li{margin:3px 0}

/* dialog */
.shade{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px;background:rgba(0,0,0,.15)}
.shade[hidden]{display:none}
.dlg{width:min(380px,100%);padding:2px;max-height:100%;overflow:auto}
.dlg .title{cursor:default}
.dlg .title .sys{cursor:pointer}
.dlg .title .sys:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}
.dlg .content{padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px;line-height:1.45}
.dlg h2{margin:0;font-size:13px}
.dlg p{margin:0}
.dlg ul{margin:0;padding-left:18px}
.dlg li{margin:3px 0}
.dlg .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.dlg label{font-size:12px}
.dlg input[type=text]{font:inherit;padding:3px 5px;border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);background:#fff;color:var(--ink);width:100%}
.dlg input:focus{outline:1px dotted var(--ink)}
.dlg .botrow{display:flex;justify-content:center;gap:6px}
.dlg .botrow img{width:44px;height:44px}
.share{font-family:"Courier New",monospace;font-size:11px;white-space:pre;background:#fff;border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);padding:6px;line-height:1.2;-webkit-user-select:text;user-select:text;overflow-x:auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.stats div{border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);padding:6px 2px;background:#fff}
.stats b{display:block;font-size:20px;color:var(--navy);font-variant-numeric:tabular-nums}
.stats small{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#404040}
.breakdown{border-collapse:collapse;width:100%;font-size:12px}
.breakdown td{padding:2px 4px;border-bottom:1px solid #d8d8d8}
.breakdown td:last-child{text-align:right;font-variant-numeric:tabular-nums;width:4em}
.breakdown .tot td{border-bottom:0;border-top:1px solid var(--sh);font-weight:700;color:var(--navy)}
.next{font-size:12px;color:#404040;text-align:center}
.foot{color:#c8e8e8;font-size:11px;text-align:center;max-width:36ch;line-height:1.5;margin:0}
.foot b{color:#fff}
.foot.small{font-size:10px;opacity:.85}
.foot a{color:#fff}