*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font:11px Tahoma,Verdana,sans-serif;color:#000}
body{background:#3a6ea5}
#desktop{position:fixed;inset:0 0 30px 0;overflow:auto;
 background:#3a6ea5 url(img/wallpaper.png) center/cover no-repeat}
.desk-icon{position:absolute;left:16px;top:16px;width:70px;text-align:center;color:#fff;text-shadow:1px 1px 2px #000;cursor:pointer}
.desk-icon img{width:32px;height:32px;display:block;margin:0 auto 3px}
.window{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:min(860px,98vw);background:#ece9d8;border:3px solid #0a3fc4;border-top:0;border-radius:8px 8px 0 0;box-shadow:3px 4px 14px rgba(0,0,0,.5)}
.window.dialog{top:50%;transform:translate(-50%,-50%);width:min(440px,94vw)}
.window[hidden],#overlay[hidden]{display:none}
.titlebar{display:flex;align-items:center;height:28px;padding:0 4px 0 6px;margin:0 -3px;border-radius:7px 7px 0 0;color:#fff;font-weight:bold;font-size:12px;text-shadow:1px 1px 0 #0a1f6e;
 background:linear-gradient(#3b8cf5 0,#0a5ae0 12%,#0553dd 50%,#0a58e6 85%,#0446c0);border:1px solid #0831a8;border-bottom:0}
.ticon{width:16px;height:16px;margin-right:5px}
.ttext{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtns{display:flex;gap:2px}
.tb{width:21px;height:21px;padding:0;border:1px solid #fff;border-radius:3px;color:#fff;font:bold 11px Tahoma;cursor:pointer;line-height:1;
 background:radial-gradient(circle at 30% 25%,#7ab0ff,#2765e0 70%)}
.tb.close{background:radial-gradient(circle at 30% 25%,#f5a28a,#d8421f 70%)}
.tb:hover{filter:brightness(1.15)}
.menubar{display:flex;background:#ece9d8;border-bottom:1px solid #aca899;padding:1px 2px}
.menu{position:relative;padding:3px 8px;cursor:default}
.menu:hover,.menu:focus{background:#316ac5;color:#fff;outline:0}
.dd{display:none;position:absolute;left:0;top:100%;min-width:160px;background:#fff;color:#000;border:1px solid #888;box-shadow:2px 2px 3px rgba(0,0,0,.4);z-index:30}
.menu:hover .dd,.menu:focus .dd{display:block}
.dd a{display:block;padding:4px 20px;cursor:default}
.dd a:hover{background:#316ac5;color:#fff}
.toolbar{display:flex;align-items:center;gap:3px;padding:3px 4px;border-bottom:1px solid #aca899;background:linear-gradient(#f6f4ec,#e5e1cf);flex-wrap:wrap}
.tool{font:11px Tahoma;border:1px solid transparent;background:none;padding:3px 7px;border-radius:3px;cursor:pointer}
.tool:hover{border-color:#8a99b8;background:#fdf6d3}
.sep{width:1px;height:20px;background:#aca899;margin:0 6px}
.pts-box{margin-left:auto}.pts-box b{font-size:13px;color:#0a3fc4}
.pts-steps i{font-style:normal;display:inline-block;padding:1px 6px;margin-left:3px;border:1px solid #aca899;border-radius:8px;background:#fff;color:#777}
.pts-steps i.on{background:#7fd13b;color:#000;border-color:#3a7d12;font-weight:bold}
.pts-steps i.past{text-decoration:line-through;opacity:.6}
.body{display:flex;gap:6px;padding:6px;flex-wrap:wrap}
.left{flex:1 1 470px;min-width:0}
.frame{background:#808080;padding:2px;border:2px solid;border-color:#808080 #fff #fff #808080}
.canvas-wrap{position:relative;background:#fff;border:2px solid;border-color:#404040 #d4d0c8 #d4d0c8 #404040;padding:0;line-height:0;overflow:hidden}
#cv{width:100%;height:auto;max-width:450px;display:block;margin:0 auto;image-rendering:pixelated;image-rendering:crisp-edges}
#cv.swap{animation:swap .55s ease-out}
@keyframes swap{0%{filter:blur(8px) brightness(1.6);transform:scale(.92)}60%{filter:blur(2px)}100%{filter:none;transform:none}}
.flash{position:absolute;inset:0;background:#f00;opacity:0;pointer-events:none}
.flash.go{animation:fl .5s}
@keyframes fl{0%{opacity:.45}100%{opacity:0}}
.guess-row{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.ac{position:relative;flex:1;min-width:140px}
#guess{width:100%;font:12px Tahoma;padding:3px 4px;border:1px solid #7f9db9;background:#fff}
.aclist{position:absolute;left:0;right:0;bottom:100%;max-height:150px;overflow:auto;background:#fff;border:1px solid #000;z-index:20}
.aclist div{padding:2px 5px;cursor:default}
.aclist div.sel,.aclist div:hover{background:#316ac5;color:#fff}
.xp-btn{font:11px Tahoma;min-width:75px;padding:4px 12px;color:#000;cursor:pointer;border:1px solid #003c74;border-radius:3px;
 background:linear-gradient(#fff,#ecebe5 85%,#d6d0c5)}
.xp-btn:hover{box-shadow:inset 0 0 0 2px #f9c870}
.xp-btn:active{background:linear-gradient(#cdcac3,#e3e3db)}
.xp-btn.def{box-shadow:inset 0 0 0 2px #98b8ea}
.xp-btn:disabled{color:#999;border-color:#aaa;box-shadow:none}
.progress{height:16px;margin-top:6px;border:1px solid #686868;border-radius:3px;background:#fff;padding:1px;overflow:hidden}
#pbar{height:100%;width:0;transition:width .5s;background:repeating-linear-gradient(90deg,#2fc22c 0 8px,transparent 8px 10px);box-shadow:inset 0 3px 3px rgba(255,255,255,.5)}
.msn{flex:0 0 230px;width:230px;display:flex;flex-direction:column;border:1px solid #7f9db9;background:#fff;min-height:200px}
.msn-head{background:linear-gradient(#e8f1fb,#b5cff0);padding:5px 7px;font-weight:bold;border-bottom:1px solid #7f9db9}
.msn-head small{font-weight:normal;color:#3a7d12}
.msn-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4c4;border:1px solid #272;margin-right:3px}
.msn-log{flex:1;overflow:auto;padding:6px;max-height:380px;min-height:150px;font-family:Tahoma,Verdana,sans-serif}
.msn-log p{margin:0 0 6px}.msn-log .who{color:#777;display:block;font-size:10px}
.msn-log .bot b{color:#0a3fc4}.msn-log .me b{color:#c33}.msn-log .sys{color:#999;font-style:italic;border-top:1px dotted #ccc;padding-top:3px}
.msn-foot{border-top:1px solid #7f9db9;background:#ece9d8;padding:4px 6px;min-height:24px}
.status{display:flex;border-top:1px solid #fff;background:#ece9d8;padding:2px;flex-wrap:wrap}
.status span{padding:1px 8px;border:1px solid;border-color:#aca899 #fff #fff #aca899;margin-right:3px}
.status span:first-child{flex:0}
.status span{white-space:nowrap}
.shake{animation:shake .6s}
.window.shake{animation:shakew .6s}
@keyframes shakew{0%,100%{margin-left:0}15%{margin-left:-14px}30%{margin-left:12px}45%{margin-left:-10px}60%{margin-left:8px}75%{margin-left:-4px}}
#overlay{position:absolute;inset:0;background:rgba(0,0,40,.25);z-index:50}
.dlg-body{display:flex;gap:12px;padding:14px 14px 8px;align-items:flex-start;background:#fff;margin:0}
.dlg-body img.ic{width:32px;height:32px;flex:none}
.dlg-body .txt{flex:1;line-height:1.5;font-size:12px}
.dlg-btns{padding:10px;text-align:center;background:#ece9d8;display:flex;gap:6px;justify-content:center}
.dlg-body.col{display:block}
.reveal-img{width:200px;height:200px;image-rendering:pixelated;float:right;margin:0 0 6px 10px;border:2px solid #404040;background:#ccc}
.logo{font:bold italic 34px "Trebuchet MS",Tahoma;color:#0a3fc4;text-shadow:2px 2px 0 #9cc3f5;letter-spacing:-1px;margin:0}
.logo span{color:#e0452b}
.big-start{font-size:14px;padding:6px 26px}
.score{font:bold 28px Tahoma;color:#0a3fc4}
.res-table{width:100%;border-collapse:collapse;margin:6px 0;font-size:11px}
.res-table th{background:#ece9d8;text-align:left;padding:2px 5px;border:1px solid #aca899}
.res-table td{padding:2px 5px;border:1px solid #d6d2c2}
.share{font:14px/1.3 monospace;background:#fffbe6;border:1px solid #aca899;padding:6px;white-space:pre;margin:6px 0}
#taskbar{position:fixed;left:0;right:0;bottom:0;height:30px;display:flex;align-items:center;z-index:100;
 background:linear-gradient(#3168d5 0,#2a5ed0 8%,#245edb 50%,#1f52c4 90%,#1941a5)}
#start{height:30px;width:100px;border:0;border-radius:0 12px 12px 0;color:#fff;font:italic bold 17px Tahoma;text-shadow:1px 1px 2px #1a4a12;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0 14px 0 10px;
 background:linear-gradient(#5dbd5a,#3a9c34 20%,#2f8a2a 80%,#256f20);box-shadow:inset -2px 0 3px rgba(0,0,0,.35)}
#start:hover{filter:brightness(1.1)}
.flag{width:16px;height:16px;background:conic-gradient(#f25022 0 25%,#7fba00 0 50%,#00a4ef 0 75%,#ffb900 0);border-radius:3px;transform:skew(-6deg)}
.tasks{flex:1;padding:0 6px}
.task{display:inline-flex;align-items:center;gap:4px;width:160px;height:24px;padding:0 6px;color:#fff;border-radius:3px;background:#3c81f3;border:1px solid #1a3fa0;box-shadow:inset 0 0 3px rgba(255,255,255,.4);cursor:pointer}
.task.active{background:#1e52b7;box-shadow:inset 1px 1px 3px rgba(0,0,0,.5)}
.task img{width:14px;height:14px}
.tray{height:30px;display:flex;align-items:center;gap:10px;padding:0 12px;color:#fff;background:linear-gradient(#0f8ae9,#1290e8 50%,#0c6fc9);border-left:1px solid #0a3d8c;box-shadow:inset 1px 0 2px #5bc1f9}
@media(max-width:700px){.msn{flex:1 1 100%;width:auto}.task{width:100px}.toolbar .pts-box{margin-left:0}}

/* ---- menu Iniciar ---- */
#start.on{filter:brightness(.85)}
#startmenu{position:fixed;left:0;bottom:30px;width:380px;z-index:101;font:11px Tahoma,Verdana,sans-serif;border:1px solid #0a3d8c;border-radius:8px 8px 0 0;box-shadow:3px -2px 8px rgba(0,0,0,.5);background:#fff}
#startmenu[hidden]{display:none}
.sm-head{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:7px 7px 0 0;color:#fff;font-size:16px;text-shadow:1px 1px 2px #0a2a6a;background:linear-gradient(#2a6fe0,#1b57c8 50%,#1448b0)}
.sm-head img{width:42px;height:42px;border:2px solid #fff;border-radius:4px;object-fit:cover;background:#7fb4ef}
.sm-body{display:flex;min-height:200px}
.sm-left{flex:1;padding:6px 2px;background:#fff}
.sm-right{width:170px;padding:6px 2px;background:#d3e5fa;border-left:1px solid #95bdee;color:#0a2a6a}
#startmenu a,.sm-sub{position:relative;display:flex;align-items:center;gap:6px;padding:5px 8px;margin:0 2px;cursor:pointer;color:inherit;text-decoration:none;border-radius:2px;font-size:12px}
#startmenu a small{color:#777;margin-left:6px}
#startmenu a:hover,.sm-sub:hover,.sm-sub:focus{background:#316ac5;color:#fff;outline:0}
#startmenu a:hover small{color:#dde}
.sm-left hr{border:0;border-top:1px solid #ddd;margin:5px 8px}
.sm-sub i{margin-left:auto;font-style:normal}
.ic{display:inline-flex;align-items:center;justify-content:center;width:24px;font-size:18px}
.ic.yt{color:#fff;background:#e62117;border-radius:4px;font-size:11px;width:22px;height:16px}
.ic.tw{color:#fff;background:#9146ff;border-radius:4px;font-size:12px;width:22px;height:16px}
.sm-fly{display:none;position:absolute;left:100%;top:-2px;min-width:190px;background:#fff;color:#000;border:1px solid #888;box-shadow:2px 2px 4px rgba(0,0,0,.4);padding:2px 0}
.sm-sub:hover .sm-fly,.sm-sub:focus .sm-fly,.sm-sub:focus-within .sm-fly{display:block}
.sm-fly a{color:#000!important}.sm-fly a:hover{background:#316ac5;color:#fff!important}
.sm-foot{display:flex;justify-content:flex-end;padding:5px 8px;border-top:1px solid #0a3d8c;background:linear-gradient(#1d56c9,#1244ae)}
.sm-foot a{color:#fff!important;margin:0}
.sm-foot a:hover{background:rgba(255,255,255,.2)!important}
.off{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;background:#d8452c;border:1px solid #fff;border-radius:4px;font-size:13px}
@media(max-width:420px){#startmenu{width:100vw}.sm-right{width:130px}.sm-fly{left:auto;right:100%}}