@font-face{font-family:ThaleahFat;src:url(./ThaleahFat-CyYwAhxL.ttf)format("truetype");font-display:block}:root{--font-head:"ThaleahFat", monospace;--font-body:"ThaleahFat", monospace;--font-label:"ThaleahFat", monospace;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light only;--ink:#2a1f2e;--cream:#f2e8d5;--gold:#f6c945;--green:#8fcf5a;--panel:#43354a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;height:100%;margin:0;overflow:hidden}#game{position:fixed;inset:0}#game canvas{image-rendering:pixelated;display:block}#ui{pointer-events:none;font-family:var(--font-body);color:var(--cream);font-size:16px;line-height:1.25;position:fixed;inset:0}#ui button,#ui input,.joy,.modal,.home,.paint{pointer-events:auto}.h{font-family:var(--font-head);letter-spacing:.5px;font-weight:700}.dim{color:#c9c6d3;font-size:16px}.credit{color:#8f8a9c;margin-top:6px}[hidden]{display:none!important}.timer{top:calc(8px + env(safe-area-inset-top));background:var(--ink);border:3px solid var(--cream);border-radius:4px;padding:2px 10px 4px;font-size:24px;position:absolute;left:50%;transform:translate(-50%)}.timer.low{color:#e0524a;border-color:#e0524a}.banner{top:calc(50px + env(safe-area-inset-top));text-align:center;text-shadow:2px 2px 0 var(--ink), -1px -1px 0 var(--ink);font-size:16px;position:absolute;left:8px;right:8px}.banner:empty,.info:empty{display:none}.info{top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));white-space:pre-line;text-shadow:2px 2px 0 var(--ink);font-size:16px;line-height:1.25;position:absolute}#ui[data-mode=title] .timer,#ui[data-mode=lobby] .timer,#ui[data-mode=reveal] .timer,#ui[data-mode=spot] .timer,#ui[data-mode=title] .info,#ui[data-mode=lobby] .info,#ui[data-mode=reveal] .info{display:none}.btn,.tool{font-family:var(--font-head);color:var(--ink);border:3px solid var(--ink);cursor:pointer;border-radius:4px;font-weight:700}.btn{background:var(--gold);padding:8px 14px 10px;font-size:16px;box-shadow:inset 0 -4px #f08a4b,inset 0 3px #fbe9a0}.btn.big{min-width:120px;padding:12px 20px 14px;font-size:24px}.btn.green{background:var(--green);box-shadow:inset 0 -4px #4f9e4a,inset 0 3px #d3f0b4}.btn.danger{background:#e0524a;box-shadow:inset 0 -4px #a8323e,inset 0 3px #f29ac0}.btn:disabled{opacity:.45;cursor:default}.btn:active,.tool:active{transform:translateY(2px)}.tool{background:var(--cream);justify-content:center;align-items:center;height:40px;padding:0;font-size:16px;display:flex}.tool.on{background:var(--gold);box-shadow:inset 0 0 0 2px var(--cream)}.tool:disabled{opacity:.4}.tool.map{height:38px;padding:0 12px;font-size:16px}.tool.done{background:var(--green);font-size:16px;box-shadow:inset 0 -4px #4f9e4a,inset 0 3px #d3f0b4}.dot{background:var(--ink);display:block}.explore,.paint{display:none}#ui[data-mode=explore] .explore,#ui[data-mode=paint] .paint{display:block}.joy{left:calc(28px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));touch-action:none;background:#2a1f2e73;border:3px solid #f2e8d599;border-radius:50%;width:132px;height:132px;position:absolute}.knob{background:var(--cream);border:3px solid var(--ink);pointer-events:none;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%}.actions{right:calc(20px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex;position:absolute}.paint{background:var(--panel);border-top:4px solid var(--ink);box-shadow:0 -3px 0 var(--cream);padding:8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));position:absolute;bottom:0;left:0;right:0}.dock{flex-direction:column;gap:6px;max-width:620px;margin:0 auto;display:flex}.tools{grid-template-columns:repeat(8,1fr) 1.6fr;gap:4px;display:grid}.palette{background:var(--ink);border:3px solid var(--ink);border-radius:4px;grid-template-columns:repeat(14,1fr);gap:2px;display:grid}.swatch{cursor:pointer;border:0;min-width:0;height:28px;padding:0}.swatch.on{outline:3px solid var(--ink);z-index:1;position:relative;box-shadow:inset 0 0 0 3px #fff}@media (orientation:portrait){.tools{grid-template-columns:repeat(5,1fr)}.tool.done{grid-column:span 2}.tools .tool{height:44px}.palette{grid-template-columns:repeat(7,1fr)}.swatch{height:38px}}@media (orientation:landscape) and (height<=420px){.tools .tool{height:34px}.swatch{height:24px}}.modal-wrap{background:#2a1f2e99;justify-content:center;align-items:center;padding:12px;display:none;position:absolute;inset:0}.modal-wrap.open{display:flex}.modal-wrap.low{background:0 0;align-items:flex-end}.modal{background:var(--panel);border:4px solid var(--ink);box-shadow:0 0 0 3px var(--cream);text-align:center;border-radius:6px;flex-direction:column;align-items:center;gap:10px;max-width:520px;max-height:100%;padding:16px 20px;display:flex;overflow:auto}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}.title{color:var(--gold);text-shadow:2px 2px 0 var(--ink);font-size:32px}.score{font-size:24px}.shots{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.shot canvas{width:104px;height:104px;image-rendering:pixelated;border:3px solid var(--ink);background:#5b5368;display:block}.pair{gap:4px;display:flex}.pair canvas{width:72px;height:72px}.shot.found canvas{border-color:#e0524a}.cap{margin-top:4px;font-size:16px}#ui input{font-family:var(--font-head);border:3px solid var(--ink);background:var(--cream);color:var(--ink);text-transform:uppercase;text-align:center;-webkit-user-select:text;user-select:text;border-radius:4px;width:11em;padding:9px 8px;font-size:16px}#ui input.short{width:6em}.status{color:var(--gold);min-height:16px;font-size:16px}.code{letter-spacing:5px;color:var(--gold);text-shadow:2px 2px 0 var(--ink);-webkit-user-select:text;user-select:text;font-size:48px}.players{flex-direction:column;gap:2px;display:flex}.modal-wrap.full{background:var(--ink);padding:0}.home{background:#b86f3c 50%/cover no-repeat;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.stage{--u:1cqw;aspect-ratio:2/3;flex:none;width:min(100vw,66.6vh);position:relative;container-type:inline-size}.stage>*{margin:0;position:absolute}:root{--dpx:1px}.ico{--cell:calc(var(--icon,24px) / var(--n,16));width:calc(var(--cell) * var(--cols,16));height:calc(var(--cell) * var(--rows,16));flex:none;display:block}@supports (width:round(down, 10px, 1px)){.ico{--cell:max(var(--dpx), round(down, calc(var(--icon,24px) / var(--n,16)), var(--dpx)))}}.ico svg{width:100%;height:100%;display:block}.logo-img{-webkit-user-select:none;user-select:none;width:78cqw;top:4.2%;left:11cqw}.ribbon-img{-webkit-user-select:none;user-select:none;width:64cqw;top:32.4%;left:18cqw}.pbtn{justify-content:center;align-items:center;gap:calc(var(--u) * 3);padding:0 0 calc(var(--u) * 1.4);cursor:pointer;font-family:var(--font-label);color:#fff;border:calc(var(--u) * .9) solid var(--ink);border-radius:calc(var(--u) * 4.4);text-shadow:calc(var(--u) * .5) calc(var(--u) * .5) 0 var(--ink), calc(var(--u) * -.3) calc(var(--u) * -.3) 0 var(--ink), calc(var(--u) * .5) calc(var(--u) * -.3) 0 var(--ink), calc(var(--u) * -.3) calc(var(--u) * .5) 0 var(--ink);display:flex;overflow:hidden}.pbtn.play:before,.pbtn.play:after{content:"";border-radius:calc(var(--u) * .8);background:#ffffffe6;position:absolute}.pbtn.play:before{left:calc(var(--u) * 3.2);top:calc(var(--u) * 1.5);width:calc(var(--u) * 4);height:calc(var(--u) * 1.6)}.pbtn.play:after{left:calc(var(--u) * 8);top:calc(var(--u) * 1.5);width:calc(var(--u) * 1.6);height:calc(var(--u) * 1.6);background:#ffffffb3}.pbtn .label{white-space:pre-line;text-align:center;flex-direction:column;align-items:center;gap:0;line-height:.8;display:flex}.pbtn small{font-family:var(--font-body);text-shadow:none}.pbtn.play{width:64cqw;height:16cqw;color:var(--ink);text-shadow:none;box-shadow:0 0 0 calc(var(--u) * .7) #fff, 0 calc(var(--u) * 1.8) 0 calc(var(--u) * .7) #2a1f2e73, inset 0 calc(var(--u) * -2.6) 0 #ee8424, inset 0 calc(var(--u) * 1.3) 0 #fde58a;background:#fbcb2e;top:43%;left:18cqw}.pbtn.play .ico{--icon:calc(var(--u) * 10)}.pbtn.play .label>span{font-size:calc(var(--u) * 9)}.pbtn.play small{font-size:calc(var(--u) * 4.4)}.duo{grid-template-columns:1fr 1fr;gap:3.2cqw;width:76cqw;height:13.6cqw;display:grid;top:55.6%;left:12cqw}.duo .pbtn{gap:calc(var(--u) * 2.4);position:relative}.duo .ico{--icon:calc(var(--u) * 10)}.duo .label>span{font-size:calc(var(--u) * 5)}.pbtn.blue{box-shadow:0 0 0 calc(var(--u) * .7) #fff, 0 calc(var(--u) * 1.6) 0 calc(var(--u) * .7) #2a1f2e73, inset 0 calc(var(--u) * -2.2) 0 #2a6dcc, inset 0 calc(var(--u) * 1.2) 0 #93d8ff;background:#3aa3ee}.pbtn.purple{box-shadow:0 0 0 calc(var(--u) * .7) #fff, 0 calc(var(--u) * 1.6) 0 calc(var(--u) * .7) #2a1f2e73, inset 0 calc(var(--u) * -2.2) 0 #7442c4, inset 0 calc(var(--u) * 1.2) 0 #d2acfb;background:#a46cee}.tiles{grid-template-columns:repeat(4,1fr);gap:2.6cqw;width:70cqw;height:16.4cqw;display:grid;top:66.4%;left:15cqw}.tile{justify-content:flex-end;align-items:center;gap:calc(var(--u) * .6);padding:calc(var(--u) * 1) 0 calc(var(--u) * 1.2);cursor:pointer;font-family:var(--font-body);font-size:max(9px, calc(var(--u) * 2.7));color:var(--ink);border:calc(var(--u) * .8) solid var(--ink);border-radius:calc(var(--u) * 3.2);box-shadow:0 0 0 calc(var(--u) * .6) #fff, 0 calc(var(--u) * 1.4) 0 calc(var(--u) * .6) #2a1f2e73, inset 0 calc(var(--u) * -1.8) 0 #e9c39d, inset 0 calc(var(--u) * 1) 0 #fff;background:#fde8d0;flex-direction:column;line-height:1;display:flex;position:relative;overflow:hidden}.tile .ico{--icon:calc(var(--u) * 8.4);margin-block:auto}.tile>span:last-child{padding-bottom:calc(var(--u) * 1.2)}.tile.soon>*{opacity:.55}.pbtn:active,.tile:active,.chip:active{transform:translateY(calc(var(--u) * .8))}.corner{gap:3cqw;display:flex;top:1.6%;right:2.4cqw}.chip{width:calc(var(--u) * 9.6);height:calc(var(--u) * 9.6);padding:calc(var(--u) * 1.5);cursor:pointer;border:calc(var(--u) * .8) solid var(--ink);border-radius:calc(var(--u) * 2.6);box-shadow:0 0 0 calc(var(--u) * .6) #f2e8d5, 0 calc(var(--u) * 1) 0 calc(var(--u) * .6) #2a1f2e66, inset 0 calc(var(--u) * .8) 0 #7b67a6, inset 0 calc(var(--u) * -1) 0 #3f3160;background:#57457c;justify-content:center;align-items:center;display:flex;position:relative}.chip .ico{--icon:calc(var(--u) * 6.2)}.chip .badge{top:calc(var(--u) * -1.6);left:calc(var(--u) * -1.6);width:calc(var(--u) * 2.8);height:calc(var(--u) * 2.8);border:calc(var(--u) * .5) solid var(--ink);background:#e0524a;border-radius:50%;position:absolute}.home .status{text-align:center;font-family:var(--font-head);font-weight:700;font-size:max(11px, calc(var(--u) * 2.6));color:#fff;min-height:0;text-shadow:2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 2px -1px 0 var(--ink), -1px 2px 0 var(--ink);top:78%;left:0;right:0}.hero{width:19cqw;image-rendering:pixelated;z-index:1;filter:drop-shadow(calc(var(--u) * 1.4) calc(var(--u) * 1.2) 0 #461e144d);top:79.6%;left:40.5cqw}.frame{width:27cqw;height:10.4cqw;top:88.6%;left:36.5cqw}.frame i{border:calc(var(--u) * 1.4) solid #fbd34d;width:6.4cqw;height:4.4cqw;filter:drop-shadow(0 calc(var(--u) * .6) 0 #e8742c);position:absolute}.frame .c0{border-bottom:0;border-right:0;top:0;left:0}.frame .c1{border-bottom:0;border-left:0;top:0;right:0}.frame .c2{border-top:0;border-right:0;bottom:0;left:0}.frame .c3{border-top:0;border-left:0;bottom:0;right:0}@media (aspect-ratio>=5/4){.stage{--u:.6cqw;aspect-ratio:2;width:min(100vw,200vh)}.logo-img{width:44cqw;top:5%;left:4cqw}.ribbon-img{width:36cqw;top:50%;left:8cqw}.hero{width:9.6cqw;top:66%;left:21.2cqw}.frame{width:13.6cqw;height:5.4cqw;top:84%;left:19.2cqw}.frame i{width:3.4cqw;height:2.4cqw}.pbtn.play{width:42cqw;height:10.6cqw;top:17%;left:53cqw}.duo{gap:2cqw;width:48cqw;height:8.6cqw;top:42%;left:50cqw}.tiles{gap:1.6cqw;width:44cqw;height:10.4cqw;top:62%;left:52cqw}.home .status{top:86%;left:50cqw;right:2cqw}.corner{gap:2cqw;top:3%;right:1.4cqw}}@media (height<=420px){.title{font-size:24px}.code{font-size:32px}.btn.big{min-width:96px;padding:8px 16px 10px;font-size:16px}.tool.map{height:32px}.modal{gap:6px;padding:10px 16px}}@media (height<=380px){.shot canvas{width:84px;height:84px}.pair canvas{width:60px;height:60px}.modal{gap:6px;padding:10px 16px}}
