:root{color-scheme:dark;--ink:#222536;--paper:#fff9ec;--coral:#ec7568;--gold:#f0c65e;--teal:#4eaa9b;letter-spacing:0;font-family:"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:#1b1f2d;color:#fff}body{min-height:100svh;padding:max(9px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden;background-image:radial-gradient(circle at 15% 20%,#a74d5155,transparent 32%),radial-gradient(circle at 90% 80%,#368c8055,transparent 30%),linear-gradient(145deg,#1b1f2d,#34304a)}button{font:inherit;letter-spacing:0}.app{height:calc(100svh - 18px);max-width:1500px;margin:auto;display:flex;flex-direction:column;gap:8px}header{height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.brand{display:flex;align-items:center;gap:9px}.brand>span{width:40px;height:40px;display:grid;place-items:center;background:var(--coral);border-radius:6px}.brand small{display:block;color:#b9bed6;font-size:8px;font-weight:800}.brand h1{margin:1px 0;font-size:20px}.stats{display:flex;gap:2px;background:#151927b8;border:1px solid #ffffff22;border-radius:6px;overflow:hidden}.stats span{padding:8px 12px;color:#aeb5cc;font-size:9px;font-weight:800;border-right:1px solid #ffffff1d}.stats span:last-child{border:0}.stats b{display:block;color:#fff;font-size:15px;text-align:center;margin-top:1px}.tools{justify-self:end;display:flex;gap:6px}.tools button{height:38px;min-width:40px;border:1px solid #ffffff27;border-radius:6px;background:#303449;color:#fff;cursor:pointer}.title-row{height:38px;display:flex;align-items:center;justify-content:center;gap:20px}.title-row button{width:33px;height:31px;border:1px solid #ffffff25;border-radius:5px;background:#303449;color:#fff;font-size:21px}.title-row div{text-align:center;min-width:130px}.title-row small,.title-row strong{display:block}.title-row small{color:#ef9e91;font-size:8px}.title-row strong{font-size:16px}.boards{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}.picture{position:relative;width:100%;aspect-ratio:4/3;border:5px solid #f2dfbd;background:#0e1220;box-shadow:0 18px 45px #0007;overflow:hidden;cursor:crosshair}.picture em{position:absolute;z-index:3;top:8px;left:8px;padding:5px 8px;border-radius:3px;background:#171b28c9;color:#fff;font-size:9px;font-style:normal;font-weight:800;pointer-events:none}.picture img{width:100%;height:100%;object-fit:cover;display:block;user-select:none}.mark{position:absolute;width:6.5%;aspect-ratio:1;border:3px solid #ffdf62;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #9c2437aa,0 0 18px #ffdd55;pointer-events:none;animation:pop .3s}.mark::after{content:"";position:absolute;inset:20%;border:2px solid #fff;border-radius:50%}.hint-ring{position:absolute;width:8%;aspect-ratio:1;border:4px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 26px 7px var(--gold);pointer-events:none;animation:pulse .65s infinite alternate}#message{height:23px;margin:0;text-align:center;color:#cdd1e3;font-size:12px;font-weight:700}dialog{width:min(370px,calc(100vw - 30px));padding:30px;border:1px solid #f0c65e77;border-radius:8px;background:#282c40;color:#fff;text-align:center;box-shadow:0 35px 90px #0009}dialog::backdrop{background:#0f111bdd;backdrop-filter:blur(5px)}dialog>span{display:grid;place-items:center;width:55px;height:55px;margin:auto;border-radius:50%;background:var(--teal);font-size:31px}dialog small{display:block;margin-top:14px;color:#f0c65e;font-weight:800}dialog h2{margin:5px}dialog p{color:#c6cadb}dialog button{width:100%;height:43px;border:0;border-radius:5px;background:var(--coral);color:#fff;font-weight:800;cursor:pointer}@keyframes pop{from{transform:translate(-50%,-50%) scale(.2)}}@keyframes pulse{to{transform:translate(-50%,-50%) scale(1.18)}}
@media(max-width:720px){body{overflow:auto;padding:6px}.app{height:auto;min-height:calc(100svh - 12px)}header{height:48px;grid-template-columns:1fr auto auto;gap:6px}.brand>span{width:35px;height:35px}.brand h1{font-size:15px}.brand small{display:none}.stats span{padding:5px 7px}.stats span:first-child{display:none}.tools button{height:35px}.title-row{height:33px}.boards{display:flex;flex-direction:column;gap:7px}.picture{border-width:3px}.picture em{top:4px;left:4px}.message{padding-bottom:5px}}
@media(max-height:520px) and (orientation:landscape){body{padding:4px}.app{height:calc(100svh - 8px);gap:3px}header{height:38px}.brand h1{font-size:15px}.brand>span{width:32px;height:32px}.stats span{padding:3px 10px}.stats b{font-size:13px}.tools button{height:32px}.title-row{display:none}.boards{display:grid;grid-template-columns:1fr 1fr;gap:5px}.picture{height:calc(100svh - 70px);width:auto;justify-self:center}.message{height:20px}}